1.先引入UI库
以v3+element-plus为例
1.引入Menu菜单导航
1.html
<el-menu
active-text-color="#FF3333"
text-color="#fff"
background-color="#002140"
class="el-menu-vertical-demo"
style="min-height: 100vh"
default-active="/layout" //默认显示路由
unique-opened //只展开一个子菜单
router //激活router模式
>
<div class="menu-title">分期付管理后台</div>
<template v-for="(item, index) in list" :key="index">
<!-- 只显示一级菜单 -->
<template v-if="item.title">
<el-menu-item :index="item.path">
<i :class="item.iconClass"></i>
<el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
</el-menu-item>
</template>
<!-- 显示二级菜单 -->
<template v-else>
<el-sub-menu :index="item.path">
<!-- 一级菜单 -->
<template #title>
<i :class="item.iconClass"></i>
<div style="width: 0.2rem"></div>
<span>{{ item.name }}</span>
</template>
<!-- 二级菜单 -->
<el-menu-item-group>
<template
v-for="(child, index) in item.children"
:key="index + ''"
>
<span v-if="child.hidden">
<el-menu-item :index="child.path">{{
child.name
}}</el-menu-item>
</span>
</template>
</el-menu-item-group>
</el-sub-menu>
</template>
</template>
</el-menu>
2.js
//引入路由(v3写法)
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//获取路由信息,并存放在list里
const list = router.options.routes.filter((v) => v.hidden);
3.配置路由
import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/login/Login.vue'
const routes = [
{
path: '/layout',
name: '首页',
// meta: { isShow: true, title: true, iconClass: 'fa fa-home' },
iconClass: 'fa fa-home',//字体图标
hidden: true,//是否在一级菜单里显示
title: true,//是否只显示一级菜单
redirect: '/layout/home',//重定向
component: () => import('../layout/Layout.vue'),
children: [
{
path: '/layout/home',
name: '首页',
component: () => import('../views/home/Home.vue'),
}
]
},
{
path: '/product',
name: '产品管理',
redirect: '/product/product',
iconClass: 'fa fa-calendar',
hidden: true,
// meta: { isShow: true, iconClass: 'fa fa-calendar' },
component: () => import('../layout/Layout.vue'),
children: [
{
path: '/product/product',
name: '产品列表',
hidden: true,//是否在二级菜单里显示
component: () => import('../views/product/Product.vue')
},
{
path: '/product/Lb-add',
name: '新增',
component: () => import('../views/product/conponents/Lb-add.vue')
},
{
path: '/product/Lb-redact',
name: '编辑',
component: () => import('../views/product/conponents/Lb-redact.vue')
},
]
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router