直接进入主题, 在项目开发中难免会遇到多层级嵌套菜单, 可以通过实际html标签嵌套, 也可以通过路由管理, 这里推荐是使用路由的方式.
1. 首先看一下一二级嵌套路由, 包含基本的登录页、首页、默认页面
export const constantRoutes = [
{
path: '/redirect', // 路由重定向
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/login', //登录页
name: 'Login',
component: () => import('@/views/login/index')
},
{
path: '/',
component: Layout,
redirect: '/home', // 一级默认路由
children: [{
path: 'home', // 二级路由
name: 'Home',
component: () => import('@/views/home/index'),
meta: {
title: '主页',
icon: 'home',
affix: true
}
}]
}
]
这里默认登录后进入的页面是"/", 也就是指向路径"/home"的路由.
2. 再看一下层级路由嵌套
export const constantRoutes = [
{
path: '/redirect', // 路由重定向
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/login', //登录页
name: 'Login',
component: () => import('@/views/login/index')
},
{
path: '/',
component: Layout,
redirect: '/home', // 一级默认路由
children: [{
path: 'home', // 二级路由
name: 'Home',
component: () => import('@/views/home/index'),
meta: {
title: '主页',
icon: 'home',
affix: true
}
}]
},
{
path: '/cd1', // 二级路由
name: '菜单1',
component: Layout,
hidden: false,
meta: {
title: '菜单1',
breadcrumb: false
},
children: [{
path: '/cd1/cd1-1', // 三级路由
name: '菜单1-1',
component: () => import('@/views/cd1/cd1-1'),
hidden: false,
meta: {
title: '菜单1-1',
breadcrumb: false
},
children: [{
path: '/cd1/cd1-1/cd1-1-1', // 四级路由
name: '菜单1-1-1',
component: () => import('@/views/cd1/cd1-1/cd1-1-1'),
hidden: false,
meta: {
title: '菜单1-1-1',
breadcrumb: false
},
children: [
]
}]
},
{
path: 'cd1-2',
name: '菜单1-2',
component: () => import('@/views/cd1/cd1-1/cd1-1-1'),
hidden: false,
meta: {
title: '菜单1-2',
breadcrumb: false
},
children: [
]
}]
}
];
路由效果:
上述路由路径可以简化
一般不建议这样做, 全路径更加清晰一些.
嵌套框架(取自vue-element-admin):