思路:
1、要想点击左侧的导航,让内容全部在右侧展示
2、点击登录还要跳转到一个新的页面,不能在导航的右侧
3、那么一级路由就是登录,还有要展示导航的页面
4、然后左侧的导航菜单全部要在导航的那个一级路由下进行展示
5、而导航下的路由,有二级导航,三级导航,说不定还有四级,一个层级的路由需要搭配一个routerView,才会展示页面
6、可以新建一个只有routerview的页面或者用jsx写一个也可以,有三级导航的时候,二级导航就是这个routerview的公共页面,三级导航的时候,一级,二级就需要用到这个公共的routerview,然后以此类推下面上代码
1、路由中的格式
const routes = [
{
path: '/',
name: 'LayOut',
component: LayOut,
redirect: '/index',
children: [
{//一级导航
path: '/index',
name: 'IndexPage',
component: () => import('@/views/index.vue'),
meta: { key: 'one', title: '首页' }
},
{//一级导航
path: '/workTable',
name: 'WorkTable',
component: () => import('@/layout/routerPage.vue'),//公共的路由页面
meta: {
title: '工作台',
key: 'sub1'
},
children: [
{//二级导航
path: '/newBulletin',
name: 'NewBulletin',
component: () => import('@/views/workTable/newBulletin.vue'),
meta: {
key: '001',
title: '公告消息'
}
},
{//二级导航
path: '/downLoad',
name: 'DownLoad',
component: () => import('@/views/workTable/downLoad.vue'),
meta: {
key: '002',
title: '下载专区'
}
}
]
},
{
//顶部导航1
path: '/home',
name: 'Home',
component: () => import('@/layout/routerPage.vue'),//公共的路由页面
meta: {
title: '测试一级导航',
key: 'sub2'
},
children: [
{
//2
path: '/home1',
name: 'Home',
replace: true,
component: () => import('@/layout/routerPage.vue'),//公共的路由页面
meta: {
title: '测试二级导航',
key: '001'
},
children: [
{
//3
path: '/home1/home2',
name: 'Home',
component: () => import('@/views/home/home2.vue'),
meta: {
title: '测试三级导航',
key: '002'
}
}
]
},
{
path: '/test9',
component: () => import('@/views/login.vue'),
meta: {
title: '测试i',
key: 'sub3'
}
}
]
}
]
},
{
path: '/login',
name: 'LoginPage',
component: () => import('@/views/login.vue')
},
{
path: '/404',
name: 'ErrorPage',
component: () => import('@/views/404.vue')
}
];
2、layout中的布局页面(也就是一级路由展示的页面)
//左侧导航的组件
//这是二级路由展示的地方
3、menu导航组件的页面
//这里的图标没有做处理
{{ item.meta.title }}
{{ val.meta.title }}
{{ ele.meta.title }}
{{ val.meta.title }}
//只有一级导航的时候
{{ item.meta.title }}
4、最终的效果
image.png
image.png