vue+router多级嵌套路由，路径正确但显示内容不对

1背景：

多级路由跳转到三级页面，面包屑显示，三级菜单隐藏

2问题：

页面跳转路径显示正确，但是页面显示的内容错误

3解决：

给页面children添加 <router-view />

path: 'manager',
      // component: () => import('@/views/taskManager/index'), // 可单独创建一个容器页面，或者下面这句代码也可，两种方法
      component: {
        render(h) {
          return h('router-view')
        }
      },
      name: 'taskManagerList',
      redirect: { name: 'taskManagerLists' },
      meta: { title: '任务管理', icon: 'documentation', roles: ['admin'] },

实现效果

1644917507(1).png
1644917571(1).png

router.js代码

import Layout from '@/layout'

const taskManagerRouter = {
  path: '/task',
  component: Layout,
  name: 'taskManager',
  redirect: { name: 'taskManagerList' },
  meta: { title: '任务', icon: 'clipboard', roles: ['admin'] },
  alwaysShow: true,
  children: [
    {
      path: 'manager',
      // component: () => import('@/views/taskManager/index'), // 可单独创建一个容器页面，或者下面这句代码也可，两种方法
      component: {
        render(h) {
          return h('router-view')
        }
      },
      name: 'taskManagerList',
      redirect: { name: 'taskManagerLists' },
      meta: { title: '任务管理', icon: 'documentation', roles: ['admin'] },
      children: [
        {
          path: 'taskManager',
          component: () => import('@/views/taskManager/taskManager/index'),
          name: 'taskManagerLists',
          meta: { title: '任务管理', icon: 'documentation', roles: ['admin'] }
        },
        {
          path: 'publicTask',
          name: 'publicTask',
          component: () => import('@/views/taskManager/publicTask/index'),
          meta: { title: '发起任务', icon: 'documentation', roles: ['admin'] },
          hidden: true
        },
        {
          path: 'taskList',
          name: 'taskList',
          component: () => import('@/views/taskManager/taskList/index'),
          meta: { title: '任务列表', icon: 'documentation', roles: ['admin'] },
          hidden: true
        }
      ]
    }
  ]
}

export default taskManagerRouter

文件目录

image.png