嵌套路由配置路由规则,使用children配置项:
import Vue from 'vue'
import VueRouter from 'vue-router'
import PageView from '@/layouts/PageView'
import TabsView from '@/layouts/tabs/TabsView'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: TabsView,
children: [
{
path: '/baseInfo',
component: PageView,
children: [
{
path: 'home',
component: () =>
import('@/pages/baseInfo/home/index.vue'),
},
{
path: '/about',
component: PageView,
children: [
{
path: '/music',
component: () =>
import(
'@/pages/baseInfo/about/music/index.vue'
),
},
{
path: 'video',
component: () =>
import(
'@/pages/baseInfo/about/video/index.vue'
),
},
],
},
],
},
],
},
]
const router = new VueRouter({
mode: 'history',
base: '/app/',
publicPath: './',
routes,
})
export default router
区别:
-
不带 / (推荐):
1、当baseInfo
的子路由home
定义的路径 path 没有书写/
,则$router.push
跳转路径为:$router.push('/baseInfo/home')
浏览器地址栏显示:
http:xxxxxxxxxx/app/baseInfo/home
2、当
baseInfo
的子路由about
定义 path 有书写/
,而它的子路由video
在定义 path 没有书写/
,则$router.push
跳转路径为:$router.push('/about/video')
浏览器地址栏显示:
http:xxxxxxxxxx/app/about/video
-
带 / :
3、当baseInfo
的子路由about
定义 path 前有书写/
,而它的子路由music
在定义 path 有书写/
,则$router.push
跳转路径为:$router.push('/music')
浏览器地址栏显示:
http:xxxxxxxxxx/app/music