I want to use vue.js with vue-router, but the onclick doesn't work.
in App.vue:
<template>
<div id="app">
<hello></hello>
<router-view></router-view>
</div>
</template>
<script>
import hello from './components/hello/Hello.vue'
export default {
name: 'app',
components: {
hello
}
}
</script>
<style>...</style>
If I connect Hello.vue like above, I can't use onclick event (maybe another too, I can't try). After click on the button nothing happens.
but if I connect Hello.vue in router:
main.js ↓
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import hello from './components/hello/Hello.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
Vue.use(VueRouter);
const routes = [
{
path: '/hello',
name: 'hello',
component: hello
},
];
var router = new VueRouter({
mode: 'history',
base: __dirname,
routes
});
const app = new Vue({
router
}).$mount('#app');
then the button works! How I can use components not in router. For example change Hello.vue to topMenu.vue. I want use menu on all pages on site, but I don't want duplicate menu in each page component, it's not DRY!
I found the answer. It was so easy, in my code I just replaced:
const app = new Vue({
router
}).$mount('#app');
with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
Related
How to run a function when application loads in Vue.js ? My code is like below
main.js
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
You could use mounted or created hook in the root instance :
new Vue({
router,
render: h => h(App),
mounted(){
//call the function
}
}).$mount('#app')
if the called function logic is related to the DOM use mounted or created if its logic is related to the instance properties.
Well, this is my App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Home/>
<AddService/>
</div>
</template>
<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/addService',
name: 'addService',
component: AddService
}
]
});
Vue.use(router)
export default {
name: 'App',
components: {
Home
}
}
</script>
I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: Add a new Service
And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected
When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.
If you want to programmatically navigate you can use the push method on the router.
Your App.vue should look like this
<template>
<div id="app">
<router-view />
</div>
</template>
Your index.js should look like this
import Vue from 'vue'
import App from '#/App.vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import AddService from '#/components/AddService'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/add-service',
name: 'Add Service',
component: AddService
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')
BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.
After that you can have router-link in your code as
<router-link to="path">
or navigate programmaticaly with
this.$router.push({ name: AddService })
or
this.$router.push({ path: '/' })
I'm just starting to use the render function and came across
with one problem.
When rendering, the Home component does not display app routes
registered in
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello World</router-link>
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>
there are no errors in the browser console.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
Home.vue
with this configuration, the routes are not displayed
<script>
export default {}
import Vue from 'vue'
new Vue({
el: '#app',
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
});
</script>
I just want to use the render function inside my components. Or understand how to use the render function correctly for two or more vue components.
How to configure the app correctly with switching between components
Home and Hello?
The components in Vue should be inherited from vue components and injected in the base component.
Vue.component('home', {
render(createElement) {
return createElement("div", { class: "container" }, [
createElement("p", { class: "my-class" }, "Some cool text")
])
}
})
new Vue({
el: '#app',
components: ['home'],
template: '<home/>'
})
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
I am new to vue. Sorry if this is a silly question. I am using vue-router to route to a component. My url is changing when I click on the router link but the contents of the component are not being displayed. I am not getting any error in the developer tools. It would be a huge help if you can help.
I tried all the answers regarding this issue here and still couldn't get it to work.
src/App.vue
<template>
<div id="app">
<router-link to="/toread">Go toread</router-link>
<router-view></router-view>
</div>
</template>
<script>
import toread from './components/toread.vue';
export default {
name: 'app',
components:{
toread
},
}
</script>
src/components/toread.vue
<template>
<div>
<h1>toread</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'
import toread from './components/toread.vue'
Vue.use(VueRouter)
const router = new VueRouter({
Routes
});
new Vue({
el: '#app',
render: h => h(App),
router
})
src/routes.js
import toread from './components/toread.vue'
export default[
{path:'/toread', component:toread},
]
I expect to click on the router link and display the h1 tag from toread component.
Change Routes to routes: Routes
const router = new VueRouter({
routes: Routes
});
In bootstrap.js, I have this:
window.Vue = require('vue');
window.events = new Vue();
Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:
const app = new Vue({
router
}).$mount('#app')
Thank you!
First install vue-router.
Then create a new file router.js in resources/assets/js and put this code in it.
import Router from 'vue-router'
Vue.use(Router)
/*
Make sure your pages components are inside `resources/assets/js/pages` folder
*/
const Home = require('./pages/Home.vue')
const Hello = require('./pages/Hello.vue')
const NotFound = require('./pages/NotFound.vue')
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}, {
path: '/hello',
name: 'hello',
component: Hello
}, {
path: '*',
component: NotFound
}, ]
})
export default router
Now go to app.js file and insert this code:
import Vue from 'vue'
import router from './router.js'
const app = new Vue({
el: '#app',
router, // Add this to your Vue instance
//...
})
Then create your pages (Home.vue, Hello.vue and NotFound.vue in this case).
in app.js
import VueRouter from 'vue-router';
window.Vue = require('vue');
window.Vue.use(VueRouter);
import router from './config/routes';
const app = new Vue({
el: '#app',
router,
});
you could extract the code for routes definition into ./config/routes.js, see below example:
import VueRouter from 'vue-router';
const routes = [
{path: '/', redirect: '/app/articles'},
...
];
const router = new VueRouter({routes});
export default router;
Here are steps to make laravel routes and vue routes work together:
1. define your vue layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
2. define your laravel route to make vue-router handle url
Route::any('{all}', function(){
// welcome view should extend layout defined in step #1
return view('welcome');
})->where('all', '.*');
3. setup vue with vue-router
routes.js
import DashboardPage from './components/dashboard/dashboard.vue'
import SignupPage from './components/auth/signup.vue'
import SigninPage from './components/auth/signin.vue'
export const routes = [
{ path: '/signup', component: SignupPage },
{ path: '/signin', component: SigninPage },
{ path: '/dashboard', component: DashboardPage },
{ path: '*', redirec: '/' }
];
router.js
import VueRouter from 'vue-router';
import { routes } from './routes';
export const router = new VueRouter({
routes,
mode: 'history'
});
export default router
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { router } from './router'
Vue.use(VueRouter);
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')