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: '/',
        ponent: Home,
        children: [
                {
                    path: ':name',
                    name: 'theTask',
                    props: true,
                    ponent: 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.

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: '/',
        ponent: Home,
        children: [
                {
                    path: ':name',
                    name: 'theTask',
                    props: true,
                    ponent: 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.

• javascript
• vue.js
• vuejs2
• vue-router

Share Improve this question Follow asked Jun 1, 2019 at 17:29 cantdocppcantdocpp 1,1361313 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The real question is what is happening under the Hood.

routes.js

var routes = [{
    path: '/',
    name: 'home', // missed this one
    ponent: Home,
    children: [
        {
            path: ':name',
            name: 'theTask',
            props: true,
            ponent: 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 ponent 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 ponent Home is App.vue. But the parent of TodoList is ponent Home. I am sure your Home.vue doesn't have <router-view>. When you are trying to render ponent 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',
    ponent: Home,
},
{
    path: '/:name',
    name: 'theTask',
    props: true,
    ponent: TodoList
}];

have a base ponent(if you really need it) and add 2 children.

var routes = [{
    path: '/',
    ponent: Base,
    children: [
        {
            path: '/',
            name: 'home',
            ponent: Home
        },
        {
            path: ':name',
            name: 'theTask',
            props: true,
            ponent: TodoList
        }
    ]
}]

Have a closer look at Evan You's example here

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 ponents that live ON the original page as their parent. If you just want a different ponent on a different page, you should define them as individual routes:

{
  path: '/',
  name: 'Home',
  ponent: Home
},
{
  path: '/:name',
  name: 'theTask', // although IMO this should be called something like "TodoList"
  ponent: TodoList
}

You can then use the Vue Developer Tools (for Chrome) to inspect and see which route is currently being rendered on your page.

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: '/',
        ponent: Base,
      children: [{
        path: '',
        name: 'Home',
        ponent: Home
      },{
        path: ':name',
        name: 'theTask',
        props: true,
        ponent: Foo
      }]
    }
  ]
})