So there is a side navbar and some link in it. The entry point is the homepage. The problem is, when i’m trying to change router-view using router-link in my side navbar, the router-view doesn’t change, but the path has change.
So here’s my route path on my router.js:
{
path: ‘/‘,
component: Home,
children: [
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
},
],
And here’s my App.vue
<div class=”container”>
<div class=”main__content”>
<div class=”sidenav”>
<aside class=”menu”>
<ul class=”menu-list”>
<li><router-link :to=”{ name: ‘theTask’, params: {name: ‘today’} }”>Today</router-link></li>
<li><router-link :to=”{ name: ‘home’ }”>Next 7 Days</router-link></li>
</ul>
</aside>
</div>
<div class=”content”>
<router-view></router-view>
</div>
</div>
</div>
It rendered the homepage, but when i’m clicking router-link to the child route, it doesn’t change the router-view, only the router link.
Solution :
The real question is what is happening under the Hood.
routes.js
var routes = [{
path: ‘/‘,
name: ‘home’, // missed this one
component: Home,
children: [
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
}]
the parent is Home and the child is TodoList the route for parent is / and route for the child is /:name. you are trying to change the view true. and it’s changing. But you can’t see it. because there is no router-view in the parent of the component you are trying to change.
By default, the parent is App.vue.js for every object in the routes array(if you don’t change it otherwise).
So Parent of component Home is App.vue. But the parent of TodoList is component Home. when sure the Home.vue.js doesn’t have <router-view>. When you are trying to render component TodoList it is rendering its parent and then finding <router-view> in its parent and trying to render itself there. But there isn’t. And even if you add <router-view> in the Home.vue.js what you will have is both Home and TodoList rendering.
What I presume you are trying to do is to render Home and TodoList render separately on App.vue.js place. there are 2 options.
in routes.js file add 2 paths one for / and another for /:name
var routes = [
{
path: ‘/‘,
name: ‘home’,
component: Home,
},
{
path: ‘/:name’,
name: ‘theTask’,
props: true,
component: TodoList
}];
have a base component(if you really need it) and add 2 children.
var routes = [{
path: ‘/‘,
component: Base,
children: [
{
path: ‘/‘,
name: ‘home’,
component: Home
},
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
}]
Have a closer look at Evan You’s example here
Solution 2:
when not sure about the use case but most likely you don’t need to use children in the routes. That is meant for components that live ON the original page as their parent. If you just want a different component on a different page, you should define them as individual routes:
{
path: ‘/‘,
name: ‘Home’,
component: Home
},
{
path: ‘/:name’,
name: ‘theTask’, // although IMO this should be called something like “TodoList”
component: TodoList
}
You can then use the vue.js Developer Tools (for Chrome) to inspect and see which route is currently being rendered on the page.
Solution 3:
In this case you should provide an empty subroute path. there is created a fiddle for the same here. This is as per the vue-router documentation.
{ path: ‘/‘,
component: Base,
children: [{
path: ‘’,
name: ‘Home’,
component: Home
},{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: Foo
}]
}
]
})