1背景：
多級路由跳轉(zhuǎn)到三級頁面，面包屑顯示信不，三級菜單隱藏
2問題：
頁面跳轉(zhuǎn)路徑顯示正確，但是頁面顯示的內(nèi)容錯誤
3解決：
給頁面children添加 <router-view />
path: 'manager',
// component: () => import('@/views/taskManager/index'), // 可單獨創(chuàng)建一個容器頁面亡呵，或者下面這句代碼也可抽活，兩種方法
component: {
render(h) {
return h('router-view')
}
},
name: 'taskManagerList',
redirect: { name: 'taskManagerLists' },
meta: { title: '任務(wù)管理', icon: 'documentation', roles: ['admin'] },
實現(xiàn)效果
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: '任務(wù)', icon: 'clipboard', roles: ['admin'] },
alwaysShow: true,
children: [
{
path: 'manager',
// component: () => import('@/views/taskManager/index'), // 可單獨創(chuàng)建一個容器頁面，或者下面這句代碼也可锰什，兩種方法
component: {
render(h) {
return h('router-view')
}
},
name: 'taskManagerList',
redirect: { name: 'taskManagerLists' },
meta: { title: '任務(wù)管理', icon: 'documentation', roles: ['admin'] },
children: [
{
path: 'taskManager',
component: () => import('@/views/taskManager/taskManager/index'),
name: 'taskManagerLists',
meta: { title: '任務(wù)管理', icon: 'documentation', roles: ['admin'] }
},
{
path: 'publicTask',
name: 'publicTask',
component: () => import('@/views/taskManager/publicTask/index'),
meta: { title: '發(fā)起任務(wù)', icon: 'documentation', roles: ['admin'] },
hidden: true
},
{
path: 'taskList',
name: 'taskList',
component: () => import('@/views/taskManager/taskList/index'),
meta: { title: '任務(wù)列表', icon: 'documentation', roles: ['admin'] },
hidden: true
}
]
}
]
}
export default taskManagerRouter
文件目錄
image.png
