vue中 <router-view>嵌套<router-view>,router中有三层

Question

routes: [

{
    path: '/', component: Main,
    children: [
        {
            path: '/help_document',
            component: Help_Document,
        },
        //我的任务-所有工作流
        {
            path: 'work', component: Work_Main,
            children: [
                {
                    path: 'task',
                    component: Work_MyTask
                },
                {
                    path: 'release',
                    component: Work_MyRelease
                }
          }
  }

]

以上是router的设置！
在Main的vue中有一个 <router-view></router-view>
在Work_Main中 也存在一个 <router-view></router-view>

实际操作： ‘/help_document’ 路径下 第一次跳转 ‘work/release’ (渲染没有问题);

   'work/release'跳转到 ‘work/task’ (渲染没有问题);
   “work/task”  跳转到 ‘/help_document’ ;以上渲染都没有问题.

但是： 再次从 ‘/help_document’ 路径下 跳转 ‘work/release’,

   浏览器地址栏地址显示正确，渲染出来的画面却是 ‘work/task’中的内容.
   
   求大神解答？

Answer 1

试试 给路由加名字。而且你的路径没加' / '

{
    path: '/', 
    name: 'main',
    component: Main,
    children: [
        {
            path: '/help_document',
            name: 'help_document',
            component: Help_Document,
        },
        //我的任务-所有工作流
        {
            path: 'work', 
            name: 'work',
            component: Work_Main,
            children: [
                {
                    path: '/task',//这里你忘了加 /
                    name: 'task',
                    component: Work_MyTask
                },
                {
                    path: '/release',//这里你忘了加 /
                    name: 'release',
                    component: Work_MyRelease
                }
          }
  }

路由push 的时候就可以直接写名字了 this.$router.push('work')
this.$router.push('release')
如果帮到你，欢迎采纳