路由器链接更改了路径，但路由器视图未更改

Question

所以我有一个侧面导航栏和一些链接。入口是主页。问题是，当我尝试使用侧面导航栏中的router-link更改路由器视图时，路由器视图没有更改，但是路径已更改。

这是我的router.js上的路由路径：

        {
        path: '/',
        component: Home,
        children: [
                {
                    path: ':name',
                    name: 'theTask',
                    props: true,
                    component: TodoList
                }
            ]
        }, 
    ],

这是我的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>  

它呈现了主页，但是当我单击到子路由的路由器链接时，它不会更改路由器视图，而只会更改路由器链接。

Answer 1

我不确定用例，但是很可能您不需要在路由中使用children。这适用于以父页面作为原始页面存在的组件。如果只想在其他页面上使用其他组件，则应将它们定义为单独的路线：

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

然后您可以使用Vue开发人员工具（适用于Chrome）检查并查看当前在页面上呈现的路线。

Answer 2

在这种情况下，您应该提供一个空的子路由路径。我为相同的here创建了一个小提琴。这是根据vue-router documentation。

    { path: '/',
        component: Base,
      children: [{
        path: '',
        name: 'Home',
        component: Home
      },{
        path: ':name',
        name: 'theTask',
        props: true,
        component: Foo
      }]
    }
  ]
})

Answer 3

真正的问题是引擎盖下发生了什么。

routes.js

var routes = [{
    path: '/',
    name: 'home', // missed this one
    component: Home,
    children: [
        {
            path: ':name',
            name: 'theTask',
            props: true,
            component: TodoList
        }
    ]
}]

1. 父级为Home，子级为TodoList，父级路由为/，子级路由为/:name。您正在尝试将视图更改为true。它正在改变。但是您看不到它。因为您要更改的组件的父级中没有router-view。

   默认情况下，routes数组中的每个对象的父对象均为App.vue（如果不进行其他操作，则其父对象为Parent）。 因此，组件Home的{​​{1}}是App.vue。但是TodoList的父级是组件Home。我确定您的Home.vue没有<router-view>。当您尝试渲染组件TodoList时，它正在渲染其父级，然后在其父级中找到<router-view>并尝试在其父级进行渲染。但是没有。而且即使您在<router-view>中添加Home.vue，也将同时呈现Home和TodoList渲染。

2. 我想您要尝试的是在Home位置分别渲染TodoList和App.vue渲染。有2个选项。

在routes.js文件中添加2条路径，其中1条为/，另一条为/:name

var routes = [
{
    path: '/',
    name: 'home',
    component: Home,
},
{
    path: '/:name',
    name: 'theTask',
    props: true,
    component: TodoList
}];

具有基本组件（如果您确实需要），并添加2个子组件。

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

仔细研究Evan You的{​​{3}}