Javascript 路由器链接更改路径，但路由器视图不更改’；不变

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

下面是我在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>  

今天
未来7天

---

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

我不确定用例，但很可能您不需要在路由中使用

子路由。这意味着组件作为其父级存在于原始页面上。如果您只想在不同的页面上使用不同的组件，则应将其定义为单独的路由：

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

然后，您可以使用Vue Developer工具（用于Chrome）检查并查看当前正在页面上呈现的路由。
在这种情况下，您应该提供一个空的子例程路径。我也为这件事做了一把小提琴。这是根据
vue路由器
进行的

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

routes.js
var路由=[{
路径：“/”，
名字：'家'，//错过了这个
组成部分：家庭，
儿童：[
{
路径：'：名称'，
名称：'任务'，
道具：没错，
组成部分：托多利斯特
}
]
}]

父级为
主级
，子级为
TodoList
父级的路由为
/
，子级的路由为
/:name
。您正在尝试将视图更改为true。它正在改变。但你看不见。因为您试图更改的组件的父级中没有
路由器视图

默认情况下，routes数组中的每个对象的父对象都是
App.vue
（如果不进行其他更改）。
所以组件
Home
的
Parent
是
App.vue
。但是
TodoList
的父级是component
Home
。我确信您的
主页.vue
没有
。当您试图将组件
渲染到实体时，它正在渲染其父组件，然后在其父组件中查找
，并尝试在父组件中渲染自身。但是没有。即使您在
Home.vue
中添加
，您也将同时拥有
Home
和
TodoList
渲染


我想您正在尝试的是在
App.vue
place上分别渲染
Home
和
TodoList
的内容。有两种选择


在
routes.js
文件中添加两个路径，一个用于
/
，另一个用于
/:name
var路由=[
{
路径：“/”，
姓名：'家'，
组成部分：家庭，
},
{
路径：'/：名称'，
名称：'任务'，
道具：没错，
组成部分：托多利斯特
}];

有一个基本组件（如果你真的需要的话）并添加两个子组件。
var路由=[{
路径：“/”，
组成部分：基础，
儿童：[
{
路径：“/”，
姓名：'家'，
组成部分：家庭
},
{
路径：'：名称'，
名称：'任务'，
道具：没错，
组成部分：托多利斯特
}
]
}]

仔细看看Evan You的

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