问题描述
使用vue3嵌套路由时,三级路由url正确,页面不显示的问题。
路径为 /home/task 但仍显示 Home页面
const routes = [
{
path: '/',
component: () => import('@/layouts/default/Default.vue'),
children: [
{
path: 'home',
name: 'Home',
component: () => import(../views/Home.vue'),
children: [
{
path: 'task',
name: 'Task',
component: () => import(../views/Task.vue')
}
]
}
]
}
]
实际上三级页面已经显示,但是被覆盖,所以需要再添加一个空页面用来展示三级页面。
解决方案:
SubView.vue页面,也就是多加一个router-view
const routes = [
{
path: '/',
component: () => import('@/layouts/default/Default.vue'),
children: [
{
path: 'home',
name: 'Home',
component: () => import(../views/Home.vue')
},
{
path: 'home',
component: () => import(@/layouts/default/SubView.vue'), // router-view页面
children: [
{
path: 'task',
name: 'Task',
component: () => import(../views/Task.vue')
}
]
}
]
}
]