Vue3 中怎样根据路由动态天生侧边菜单

在 Vue3 的项目开辟，尤其是配景管理体系这类复杂应用场景中，侧边菜单扮演着举足轻重的脚色，它是用户快速导航至各个功能模块的得力助手。而根据路由动态天生侧边菜单，则为体系的机动性和可扩展性增长了强盛动力。接下来，我们将深入探究如安在 Vue3 中实现这一关键功能。
gitCode代码地点：https://gitcode.com/Jiaberrr/vue3-pc-template/overview,
gitee代码地点：https://gitee.com/zunyi-gabe/vue3-pc-template （如果须要简单版（除了框架啥也没有）请切到master分支）
演示地点1：https://vue3-pc-template.vercel.app/login演示地点2：https://env-00jxt0stsnl3-static.normal.cloudstatic.cn/index.html
一、预备工作

起首，确保你的 Vue3 项目已经集成了 Vue Router 和符合的 UI 组件库（如 Element Plus，这里以其为例举行解说，原理相通）。Vue Router 负责管理路由信息，而 UI 组件库则提供了雅观且功能丰富的菜单组件供我们使用。
二、路由设置底子

• 在项目标路由模块（通常是 router/index.js 之类的文件）中，经心界说好各个路由路径及其对应的组件。比方：
  

1. import { createRouter, createWebHistory } from 'vue-router';
3. import Home from '@/views/Home.vue';
5. import About from '@/views/About.vue';
7. import UserManage from '@/views/UserManage.vue';
9. const routes = [
11. {
13. path: '/',
15. name: 'Home',
17. component: Home,
19. meta: {
21. breadcrumbName: '首页',
23. icon: 'HomeFilled' // 假设 Element Plus 的图标名称，实际依库而定
25. }
27. },
29. {
31. path: '/about',
33. name: 'About',
35. component: About,
37. meta: {
39. breadcrumbName: '关于我们',
41. icon: 'InfoFilled'
43. }
45. },
47. {
49. path: '/user-manage',
51. name: 'UserManage',
53. component: UserManage,
55. meta: {
57. breadcrumbName: '用户管理',
59. icon: 'UserFilled'
61. },
63. children: [
65. {
67. path: 'list',
69. name: 'UserList',
71. component: () => import('@/views/UserList.vue'),
73. meta: {
75. breadcrumbName: '用户列表'
77. }
79. },
81. {
83. path: 'add',
85. name: 'UserAdd',
87. component: () => import('@/views/UserAdd.vue'),
89. meta: {
91. breadcrumbName: '添加用户'
93. }
95. }
97. ]
99. }
101. ];
103. const router = createRouter({
105. history: createWebHistory(),
107. routes
109. });
111. export default router;

复制代码

这里，每个路由对象都有 meta 字段，用于存储菜单表现相干的额外信息，如面包屑名称和图标名称，同时部门路由设置了子路由，构建出层级布局，为侧边菜单的多级展示奠基底子。
三、组件搭建

• 创建侧边菜单组件（比方 SidebarMenu.vue）：
  

1. <template>
2.   <div class="logo-container flex-center">
3.     <img class="logo-icon" src="/img/logo.png" />
4.     <text v-if="!isCollapse">后台管理平台</text>
5.   </div>
6.   <el-menu
7.     :default-active="$route.path"
8.     class="el-menu-vertical-demo"
9.     router
10.     unique-opened
11.     :collapse="isCollapse"
12.     @select="changeMenu"
13.   >
14.     <el-menu-item index="/dashboard">
15.       <el-icon><Menu /></el-icon>
16.       <template #title>首页</template>
17.     </el-menu-item>
18.     <el-sub-menu v-for="item in routerList" :index="item.path" :key="item.name">
19.       <template #title>
20.         <el-icon>
21.           <component :is="item.meta.icon" />
22.         </el-icon>
23.         <span v-show="!isCollapse">
24.           {{ item.meta.breadcrumbName }}
25.         </span>
26.       </template>
27.       <el-menu-item
28.         v-for="ite in item.children"
29.         :index="item.path+ '/'+ ite.path"
30.         :key="ite.name"
31.         >{{ ite.meta.breadcrumbName }}</el-menu-item
32.       >
33.     </el-sub-menu>
34.   </el-menu>
35. </template>
36.   
37.   <script setup>
38. import router from "@/router";
39. import { useAuthRouterStore } from "@/stores/authRouter.js";
40. import { useTagStore } from "@/stores/tagList.js";
41. const tagStore = useTagStore();
42. const routerOptions = router.getRoutes()
44. const authRouterStore = useAuthRouterStore();
45. const props = defineProps(["isCollapse"]);
46. const routerList = authRouterStore.routerList;
47. const changeMenu = (menu) => {
48.   let obj = routerOptions.find(val => val.path == menu)
49.   tagStore.addTagList({
50.   name:obj.path,
51.   breadcrumbName:obj.meta.breadcrumbName
52. })
54. }
55. </script>
56.   
57.   <style scoped>
58. .el-menu-vertical-demo:not(.el-menu--collapse) {
59.   width: 180;
60. }
61. .logo-container {
62.   width: 100%;
63.   height: 60px;
64.   overflow: hidden;
65. }
66. .logo-icon {
67.   height: 60px;
68.   scale: 1.4;
69. }
70. </style>
71.   

复制代码

在模板部门：

 1、头部 logo 展示：

• 通过<div class="logo-container flex-center">包裹，实现了 logo 图标清静台名称的程度居中布局。当侧边栏处于睁开状态（!isCollapse）时，表现“配景管理平台”笔墨，logo 图标通过<img class="logo-icon" src="/img/logo.png" />引入，而且设置了肯定的样式，如高度为 60px，缩放比例为 1.4。
  

2、 菜单主体构建：

• 使用了 Element UI 的 <el-menu> 组件来构建侧边菜单。
  
• :default-active="$route.path"：将当前激活菜单与当前路由路径绑定，确保用户在页面跳转时，对应的菜单能准确高亮表现。
  
• router 属性开启了路由模式，使得点击菜单可以或许自动触发路由跳转。
  
• unique-opened 包管了同一时间只有一个子菜单处于睁开状态，提拔了菜单的交互体验。
  
• :collapse="isCollapse"：用于控制菜单的折叠状态，根据传入的 isCollapse 属性值来决定菜单是否折叠表现。
  
• @select="changeMenu"：绑定了菜单选择变乱，当用户点击菜单时，会触发 changeMenu 方法，后续我们再详细解说这个方法的作用。
  
• 菜单分为两级布局：
  

          一级菜单：<el-menu-item index="/dashboard"> 代表首页菜单，有对应的图标<el-icon><Menu /></el-icon>和标题<template #title>首页</template>。
         二级菜单：通过 v-for 循环遍历 routerList 数组来天生。每个二级菜单组由 <el-sub-menu> 包裹，标题部门同样有图标和名称表现，子菜单项通过内层的 v-for 循环 item.children 天生，每个子菜单项的 index 由父级路径和自身路径拼接而成，确保路由的正确性，而且展示对应的 breadcrumbName 作为菜单名称。
在脚本部门：

1、 模块引入：

• 引入了项目标路由实例 router，这是 Vue Router 在项目中的核心模块，用于管理路由相干操纵。
  
• 引入了两个自界说的 Vuex 存储模块：useAuthRouterStore 和 useTagStore，分别用于管理认证相干的路由信息和标签列表信息。实例化 tagStore 和 authRouterStore 以便后续使用。
  

2、 组件属性吸取：

• 通过 defineProps(["isCollapse"]) 吸取父组件传入的 isCollapse 属性，用于控制菜单的折叠状态，与模板中的 :collapse="isCollapse" 相对应。
  

3、 数据获取与方法界说：

• routerList = authRouterStore.routerList：从 authRouterStore 中获取路由列表数据，这个数据应该是颠末权限过滤等处理惩罚后的动态路由列表，用于在模板中天生侧边菜单。
  
• changeMenu 方法：当菜单被点击时触发。它起首在 routerOptions（通过 router.getRoutes() 获取的全部路由设置信息）中查找与当前点击菜单 menu 对应的路由对象 obj。然后，调用 tagStore.addTagList 方法，向标签列表存储中添加一个新的标签对象，包罗当前点击菜单对应的路由路径 namebj.path 和面包屑名称 breadcrumbNamebj.meta.breadcrumbName，这一步大概是用于记任命户的操纵汗青大概构建面包屑导航等功能。
  

四、优化与拓展

1、 权限控制：团结后端返回的用户权限信息，在 filteredRoutes 盘算属性中进一步筛选，确保用户只能看到有权访问的菜单。比方，可以在路由的 meta 字段添加权限标识，然后根据用户的权限列表举行比对过滤。
2、 动态加载菜单：对于大型项目，一次性加载全部菜单大概影响初始加载性能。可以使用 Vue 的异步组件特性，在用户点击睁开二级菜单大概进入特定模块时，再动态加载子菜单对应的组件，优化资源使用。
3、 样式定制：根据项目标操持风格，深入定制侧边菜单的样式，如颜色、字体、动画结果等，提拔用户视觉体验。
通过以上步调，我们在 Vue3 中乐成构建了一个根据路由动态天生的侧边菜单体系，而且为后续的功能拓展和优化铺就告终实蹊径，助力打造高效、易用的 Vue3 应用。