vite+vue3使用element的menu动态路由
2022-10-28 本文已影响0人
焚心123
-
思路：
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中的布局页面（也就是一级路由展示的页面）
<div class="layout-home">
<el-container class="layout-conter">
<el-aside :width="isCollapse ? '64px' : '200px'" class="transton">
//左侧导航的组件
<MenuPage :is-collapse="isCollapse" />
</el-aside>
<el-container>
<el-header class="layout-nav" style="height: 90px">
<div class="nav-top flexr flexcc flexjb">
<div class="layout-header">
<i
:class="[
'iconfont',
'nav-none',
isCollapse ? 'icon-xianshidaohang' : 'icon-yincangdaohang'
]"
@click="showCollapse"
/>
<span>商户支付业务管理平台</span>
</div>
<div class="flexr flexcc">
<p class="nav-title">欢迎您，xx用户</p>
<div class="flexr flexcc">
<i class="iconfont icon-tuichudenglu nav-none1" />
<p>退出登录</p>
</div>
</div>
</div>
<div class="layout-tabs">
<TabsNav />
</div>
</el-header>
//这是二级路由展示的地方
<el-main><RouterView /></el-main>
</el-container>
</el-container>
</div>
3、menu导航组件的页面
<div class="layout-nav">
<el-menu
:default-active="$route.path" //默认展示的
class="el-menu-vertical-demo"
:collapse="isCollapse1"
router //路由模式
unique-opened
>
<div class="logo-box">
<img src="../assets/img/guoerlogo.png" alt="" class="logo" />
</div>
<template
v-for="item in $router.options.routes[0].children"
:key="item.meta.key"
>
<template v-if="item.children">
<el-sub-menu :index="item.meta.key">
<!-- 一级导航 -->
<template #title>
//这里的图标没有做处理
<el-icon><location /></el-icon>
<span>{{ item.meta.title }}</span>
</template>
<!-- 二级导航 -->
<template v-if="item.children">
<el-menu-item-group
v-for="val in item.children"
:key="val.meta.key"
>
<template v-if="val.children">
<el-sub-menu
v-for="ele in val.children"
:key="ele.meta.key"
:index="ele.path"
>
<template #title>
<span>{{ val.meta.title }}</span>
</template>
<el-menu-item
:index="ele.path"
@click="menuClick($event, ele.meta.title)"
>
{{ ele.meta.title }}
</el-menu-item>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item
:index="val.path"
@click="menuClick($event, val.meta.title)"
>
{{ val.meta.title }}
</el-menu-item>
</template>
</el-menu-item-group>
</template>
</el-sub-menu>
</template>
<template v-else>
//只有一级导航的时候
<el-menu-item
:index="item.path"
@click="menuClick($event, item.meta.title)"
>
<el-icon><setting /></el-icon>
<template #title>{{ item.meta.title }}</template>
</el-menu-item>
</template>
</template>
</el-menu>
</div>
4、最终的效果
image.png
image.png
