Router link changes the path but Router view doesn’t change

Question

So i have 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.

Answer 1

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
        }
    ]
}]

1. 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 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. I am sure your Home.vue 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 what you will have is both Home and TodoList rendering.

2. What I presume you are trying to do is to render Home and TodoList render separately on App.vue 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

Answer 2

In this case you should provide an empty subroute path. I have 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
      }]
    }
  ]
})

Answer 3

I am not sure about the use case but most likely you don't need to use children in your 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 Developer Tools (for Chrome) to inspect and see which route is currently being rendered on your page.