Vue3 家庭桶 - VueRouter - [3] 嵌套路由 [儿童
最编程
2024-03-12 15:07:49
...
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// TODO 创建路由规则数组
const routes = [
{
path: '/',
// 路由重定向
redirect: '/guoMan'
},
{
path: '/teleplay',
name: 'teleplay',
component: () => import('@/views/Teleplay/index.vue'),
children: [
{
path: 'teleplayList',
name: 'teleplayList',
component: () => import('@/views/Teleplay/components/TeleplayList.vue')
}
]
},
{
path: '/guoMan',
name: 'guoMan',
component: () => import('@/views/GuoMan/index.vue'),
children: [
{
path: 'guoManList',
name: 'guoManList',
component: () => import('@/views/GuoMan/components/GuoManList.vue')
}
]
},
{
path: '/riMan',
name: 'riMan',
component: () => import('@/views/RiMan/index.vue'),
children: [
{
path: 'riManList',
name: 'riManList',
component: () => import('@/views/RiMan/components/RiManList.vue')
}
]
},
{
path: '/movie',
name: 'movie',
component: () => import('@/views/Movie/index.vue'),
children: [
{
path: 'movieList',
name: 'movieList',
component: () => import('@/views/Movie/components/MovieList.vue')
}
]
}
]
// TODO 创建路由
const router = createRouter({
// TODO 规定路由模式
// history: createWebHashHistory(),
history: createWebHistory(),
routes
})
export default router