devbox
程序安全守护者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3+element-plus实现动态菜单和动态路由动态按钮（前后端分离）_vue3动态路由导航菜单

作者：程序安全守护者 | 2024-02-04 14:15:57

赞

踩

vue3动态路由导航菜单

目录

前言

写在前面

前期准备

动态菜单

获取菜单：

生成（渲染）菜单

动态路由

获取路由

处理路由格式

创建路由

动态按钮

分析

获取权限码

缓存权限码

权限对比

实现效果

+el-tabs美化

写在前面

分析功能：

快速篇

循序渐进篇

后端响应的菜单数据

源码地址

附加（动态路由的另一种实现方式）：

前言

本篇文章旨在从零搭建一个动态路由动态菜单的后台管理系统初始环境，如果您只有个别地方没有实现，那么可以根据目录选择性的阅读您所需的内容

写在前面

本文使用技术：vue3，pinia状态管理，element-plus，axios

注意在本文章中，有些方法并没有粘出来，比如一些发送请求的方法，因为没有必要，需要根据你们自己的情况进行修改，如果你看到一些方法并没有写出来，那多半就是发送请求的方法。

效果预览

前期准备

本文需要使用axios，路由，pinia，安装element-plus，并且本文vue3是基于js而非ts的，这些环境如何搭建不做描述，需要读者自己完成。下面开始

在这之前我们需要一个布局

假设我们的home组件，是如下

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-aside width="200px">
  5.         <div>
  6.           <!-- 菜单侧栏导航栏 -->
  7.           <menus></menus>
  8.         </div>
  9.       </el-aside>
  10.       <el-container>
  11.         <el-header>
  12.           <div class="head_class">
  13.             <!-- 头部内容 可以忽略-->
  14.             <Crumbs></Crumbs>
  15.             <div>
  16.               <el-button type="primary" text @click="logOut">注销</el-button>
  17.             </div>
  18.           </div>
  19.         </el-header>
  20.         <el-main>
  21.           <!-- 主要内容 -->
  22.           <div>
  23.                 <router-view></router-view>
  24.           </div>
  25.         </el-main>
  26.       </el-container>
  27.     </el-container>
  28.   </div>
  29. </template>

 话不多说，下面正片开始

动态菜单

功能：根据不同的角色显示不同的菜单，菜单数据由后端提供，前端负责渲染即可

实现步骤：获取菜单--->缓存--->渲染菜单

我们使用elemen-plus的menu菜单来渲染

获取菜单：

首先我们需要先获取到菜单，一般是在登录的时候获取。可以根据自己的情况而定。由于我后端采用的是RBAC模型，也就是所谓的用户-角色-权限模型，而菜单属于权限，我需要先获取角色信息，然后获取菜单信息，下面是我的登录组件的登录方法，可能代码比较多，如果你已经获取了菜单，可以直接跳过此处

  1. import {reactive, ref, onMounted, watchEffect} from "vue";
  2. import {getCaptcha, login} from "@/api";
  3. import {useRouter} from "vue-router";
  4. import {setToken, removeToken, getToken} from "@/util/token/getToken";
  5. import {getMyRole} from '@/api/home/permission/role/index'
  6. import {useMenusStore} from '@/store/permission'
  7. import {getMYMenus} from "@/api/home/permission/menus/index";
  8.  
  9. const store = useMenusStore()//pinia的操作
  10.  
  11. async function loginsubmit() {
  12.   /*登录*/
  13.   await login(loginForm).then((res) => {
  14.     if (res.data.code == 200) {
  15.       window.sessionStorage.clear()
  16.       setToken("token", res.data.data.token);
  17.     }
  18.     else {
  19.      
  20.     }
  21.   })
  22.   // 简单的健壮性判断
  23.   if (getToken(`token`)) {
  24.     /*获取角色信息*/
  25.     await getMyRole().then((res) => {
  26.       store.setRoles(res.data.data)
  27.     })
  28.     /*获取菜单信息*/
  29.     await getMYMenus(store.roleIds).then(res => {
  30.       store.setMenuList(res.data.data.menuPermission);
  31.       router.push("/home")
  32.     })
  33.   }
  34. }

上面主要是发送请求获取菜单，然后将菜单数据缓存到pinia中，也就是上面代码的store，下面是pinia的代码（缓存菜单数据以及路由数据）

  1. import {defineStore} from "pinia" // 定义容器
  2. import {getRoleRouter} from "@/api/home/permission/menus";
  3. import {logout} from '@/api/index'
  4.  
  5.  
  6. export const useMenusStore = defineStore('permission', {
  7.     /**
  8.      * 存储全局状态，类似于vue2中的data里面的数据
  9.      * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
  10.      * 和 TS 类型推导
  11.      */
  12.     state: () => {
  13.         return {
  14.             menuList: [],//菜单信息
  15.             roles: [],//角色信息
  16.             menuRouter: [],//路由信息
  17.             roleIds: [],//角色Id
  18.         }
  19.     },
  20.     /**
  21.      * 用来封装计算属性 有缓存功能  类似于computed
  22.      */
  23.     getters: {},
  24.     /**
  25.      * 编辑业务逻辑  类似于methods
  26.      */
  27.     actions: {
  28.         //菜单
  29.         setMenuList(data) {
  30.             this.menuList = data
  31.         },
  32.         //设置路由：data-->后端传入的路由信息
  33.         setMenuRouter(data) {
  34.             data.forEach(item => {
  35.                 //定义一个对象-->routerInfo格式化后端传入的路由信息
  36.                 let routerInfo = {
  37.                     path: item.path,
  38.                     name: item.name,
  39.                     meta: item.name,
  40.                     component: () => import(`@/views/${item.linkUrl}`),
  41.                 }
  42.                 this.menuRouter.push(routerInfo)//加入到home子路由下
  43.             })
  44.         },
  45.         setRoles(data) {
  46.             this.roles = data
  47.             this.roleIds = data.map(item => {
  48.                 return item.id
  49.             })
  50.         },
  51.         generateRoutes() {
  52.             //获取路由信息
  53.             return new Promise((resolve, reject) => {
  54.                 getRoleRouter(this.roleIds).then(res => {
  55.                     if (res.data.code == 200) {
  56.                         this.setMenuRouter(res.data.data)
  57.                         resolve()
  58.                     } else {
  59.                         reject()
  60.                     }
  61.                 })
  62.             })
  63.         },
  64.         logout() {
  65.             /*注销登录*/
  66.            return  logout().then(res => {
  67.                 if (res.data.code == 200) {
  68.                     this.$reset()//清除状态管理所有数据
  69.                     window.sessionStorage.clear()//清除本地所有缓存
  70.                     return true
  71.                 }
  72.                 else return false
  73.             })
  74.         },
  75.     },
  76.     // 持久化设置
  77.     persist: {
  78.         enabled: true,	//开启
  79.         storage: sessionStorage,	//修改存储位置
  80.         key: 'permissions',	//设置存储的key,在这里是存在sessionStorage时的键
  81.         paths: ['menuList', 'hasRouter', `roles`, 'roleIds'],//指定要持久化的字段，menuRouter不需要缓存。因为每次路由跳转我们都可以重新获取
  82.     },
  83. })

你可能会说，这直接粘一些垃圾代码，谁爱看啊，别担心，在上面的代码主要用到的是将角色、菜单信息缓存的操作，你需要关注的也就是下面的截图，其他的代码暂时不用理会，后面会讲

在上面的代码中，主要是将菜单信息和角色信息存入pinia，当然角色信息是否存储并不重要，因为他跟我们的主题并没有多大的相关

注意：这个菜单是菜单树的结构哦！如果想看看后端响应的数据结构，可以在文章最后面查看

 好了到这咱们已经获取到了菜单了，下面就是生成菜单了

生成（渲染）菜单

获取了菜单，我们就需要在首页中渲染菜单。

使用明确：element-plus中menu主要分为两种状态：有子菜单（目录）和没有子菜单，我们需要根据这两种分别渲染。

我们就可以粘代码修修改就可以了，

新建一个vue文件：我们假定这个组件是menus

  1. <template>
  2.   <el-row>
  3.     <el-col>
  4.       <h5 class="mb-2">后台管理系统</h5>
  5.       <el-menu
  6.           active-text-color="#ffd04b"
  7.           background-color="#545c64"
  8.           class="el-menu-vertical-demo"
  9.           default-active="0"
  10.           text-color="#fff"
  11.           router="true"
  12.       >
  13.         <menuTree :menuList="menuList"></menuTree>
  14.       </el-menu>
  15.     </el-col>
  16.   </el-row>
  17. </template>
  18.  
  19. <script setup>
  20. import menuTree from "@/components/menu/menuTree/index";//渲染菜单的组件
  21. import {useMenusStore} from "@/store/permission";
  22.  
  23. let menuList = useMenusStore().menuList;//获取pinia的缓存的菜单数据
  24. </script>

你可能会问：怎么代码这么少？而且只有<el-menu>标签？渲染菜单的<el-sub-menu>和<el-menu-item>标签呢？

由于我们会采用递归，如果把所有代码都写到一个组件里面，那么所有元素都会重复了，比如说上面这个“后台管理系统”标题会被重复显示，那么这肯定是不行的，所以我们需要将渲染菜单的具体操作放在另一个vue文件里面，具体的代码就在这个<menuTree> 组件里面，当然我们还需要将pinia中存入的菜单信息传给这个组件，让其渲染

下面我们来看看这个<menuTree >组件

  1. <template>
  2.   <div>
  3.     <template v-for="item in menuList" :key="item.path">
  4.       <!--      分为两种方式渲染：有子菜单和没有子菜单-->
  5.       <el-sub-menu
  6.           :index="item.path"
  7.           v-if="item.nodeType == 1"
  8.       >
  9.         <template #title>
  10.           <span>{{ item.name }}</span>
  11.         </template>
  12.         <!--        有子菜单的继续遍历（递归）-->
  13.         <menuTree :menuList="item.children"></menuTree>
  14.       </el-sub-menu>
  15.       <!--      没有子菜单-->
  16.       <el-menu-item :index="item.path" v-if="item.nodeType==2">
  17.         <span>{{ item.name }}</span>
  18.       </el-menu-item>
  19.     </template>
  20.   </div>
  21. </template>
  22. <script>
  23. export default ({
  24.   name: 'menuTree',
  25.   props: {
  26.     menuList: {
  27.       type: Array
  28.     }
  29.   },
  30.   setup(props) {
  31.     return {};
  32.   }
  33. })
  34. </script>

在上面的代码中：

1、我使用nodeType的值来判断是否存在子菜单。因为我在数据库存储的菜单属性中规定nodeType=1就是目录，具有子菜单，=2就是没有子菜单，是页面，=3就是按钮。你也可以通过其他的方法来判断，比如说，菜单children的长度是否大于零。如果有子菜单，那么我们还需要再一次遍历，也就是递归，无论我们有多少级菜单都能够遍历出来，当然，理论上层次深了会爆栈，但是正经人谁会弄那么深是吧？

2、我采用父子组件的传递数据的方法把菜单数据传入带渲染菜单的子组件中

好了到这里，基本就实现了动态菜单的效果了，但这还不行，虽然用户不能通过菜单的方式来访问与他无关的页面，但是他可以通过手动输入路由信息来跳转，所以我们需要使用动态路由来防止

动态路由

功能：根据不同的权限创建对应的路由

实现步骤：获取路由----->处理路由格式并缓存------>创建路由（前置守卫）

获取路由

我们查看pinia中的获取路由方法，具体代码就在上面的pinia那里

获取路由的请求

 上面没什么好说的，就一个获取路由信息然后存入pinia中的操作，重点是下面的处理路由信息，这里我们需要将后端传过来的数据处理为路由格式。

处理路由格式

注意：由于我这里所有路由都只有一层，并没有子路由，所以这样处理，如果你想要多嵌套几个路由，那么你需要将后端传来的路由信息处理为树结构（也可以在后端处理），然后再遍历处理（可能还需要递归遍历处理） 并添加到children属性里面，这里就不多说

好了，到现在我们已经做完准备，到了最终的环节：在哪里创建？怎么创建路由？

创建路由

老样子先粘代码，再解说

这里是router/index.js代码，没什么特别的，主要是定义一些静态路由，和必要的路由配置创建

  1. import {createRouter, createWebHistory} from "vue-router";
  2.  
  3. import {useMenusStore} from "@/store/index";
  4.  
  5. //静态路由
  6. const constRoutes = [
  7.  
  8.     {
  9.         path: '/',
  10.         redirect: '/login'
  11.     },
  12.     {
  13.         path: '/login',
  14.         component: () => import('@/views/login')
  15.     },
  16.     {
  17.         path:'/404',
  18.         component:()=>import('@/views/CommonViews/404')
  19.     },
  20.  
  21. ]
  22. const routerHistory = createWebHistory()
  23. const router = createRouter({
  24.     history: routerHistory,
  25.     routes: constRoutes
  26. })
  27.  
  28. export default router

我们采用的是在路由守卫中动态创建路由，下面就是router/permission.js。主要是定义一个前置守卫，守卫里面动态创建路由，

  1. import {createPinia} from 'pinia';
  2.  
  3. const pinia = createPinia();
  4. import router from "@/router/index";
  5. import {useMenusStore} from "@/store/permission";
  6. import Home from '@/views/home/index.vue'
  7. import NProgress from 'nprogress' // 进度条
  8. import 'nprogress/nprogress.css'
  9. import {getUserMenus} from "@/api/home/permission/menus";
  10. import {getToken} from "@/util/token/getToken";
  11.  
  12. //路由白名单
  13. const Whitelist = ['/', '/login', '/error', '/404']
  14.  
  15. //全局路由守卫
  16. router.beforeEach((to, from, next) => {
  17.     NProgress.start();
  18.     const store = useMenusStore()
  19.     const hasetoken = getToken('token')
  20.     if (to.path == "/login" && hasetoken) {
  21.         //如果已经登录还在访问登录页，直接跳转首页
  22.         next('/home')
  23.     }
  24.     if (Whitelist.indexOf(to.path) == -1) {
  25.         //没有在白名单里面
  26.         if (store.menuRouter.length == 0 && hasetoken) {
  27.             /*已经登录还未获取路由,就获取路由信息（pinia）*/
  28.             store.generateRoutes().then(() => {
  29.                 const routerlist = store.menuRouter
  30.                 router.addRoute(
  31.                     {
  32.                         path: '/home',
  33.                         name: 'Home',
  34.                         component: Home,
  35.                         redirect: '/home/homepage',
  36.                         children: routerlist
  37.                     }
  38.                 )
  39.                 next({...to, replace: true})//确保路由添加成功
  40.             })
  41.         } else {
  42.             /*两种情况进入：1：已经获取了路由（一定有token），2，没有登录（一定没有路由）*/
  43.             NProgress.done()
  44.             if (hasetoken && to.matched.length != 0) {
  45.                 /*to.matched.length === 0判断当前输入的路由是否具有，即使登陆了，如果输入不能访问的路由也要404*/
  46.                 /*已经获取了路由,并且访问路由合法，放行*/
  47.                 next()
  48.             } else {
  49.                 next('/404')
  50.             }/*没有登录、登录了但是访问路由不合法，都跳转404*/
  51.         }
  52.     } else {
  53.         NProgress.done()
  54.         /*在白名单里面，直接放行*/
  55.         next()
  56.     }
  57. })
  58.  
  59.

在上面代码中：

  1. 我们采用addRoute方法来动态创建路由（因为vue路由初始化完成后就不能直接修改路由数据了，只能通过vue提供的addroute函数来实现），这方法好像只能一次创建一个路由，并且还是根路由（一级路由），由于我们菜单路由是home（一级路由）下的子路由，所以就放在home的children里面。
  2. 我们采用next({...to, replace: true})来确保路由创建完毕，注意，他并不是直接放行，添加完路由后，他会再重新进入路由守卫。
  3. 在上面2中说过，由于next({...to, replace: true})并不能直接放行，会再一次进入守卫，所以在

中这个if（）判断尤为重要，不然一直循环进入这个if（）里面出不来，会导致浏览器白屏卡死 ，在if（）之外一定要放行。在上面的代码中，我是采用pinia里面存储路由的数组长度判断，当然你也可以用其他的方法，比如当前的路由长度减去静态路由是否为0作为条件。当然也需要判断好其他情况，比如用户输入不存在的路由，我们需要将其跳转到404等。

        4. 路由刷新会丢失，每次刷新需要重新创建。每一次刷新页面都会丢失动态添加的路由。在上面中我们使用的是判断pinia中路由数组的长度来判断的，在这样的情况下，我们就不能持久化pinia这个路由数组（如果是其他判断条件则可以持久化，一切以判断条件而立），不然页面刷新丢失路由，却没法进入这个if（）里面（因为如果持久化，这个menrouter就不会为空，if判断条件不成立）。无法进入if创建动态创建路由，在上面的代码中就会一直进入404（如果没有404页面处理，就是白屏）

 可以看到我并没有将这路由数组持久化。

我还是再说一遍，如果你是其他判断条件，比如说你是使用路由的长度判断（是否大于静态路由数组长度），那么就可以持久化，而在if（）内部也不用每次都发送请求，不然持久化也失去了意义。

当然，就我而言，更倾向于每次刷新就发送请求，这样可以确保数据的准确性。

这里提一嘴，permission.js定义的路由守卫想要生效就需要在min.js中引入，如果你觉得麻烦就全定义在router/index.js中也是可行的，如果你是单独新建js实现的路由守卫，记得引入哦。

动态按钮

分析

动态按钮的实现可以通过v-if或者v-show指令来动态渲染按钮（根据后端返回的权限码比对）；

如果你觉得麻烦，你可以用vue中自定义组件来简化。这里就不再赘述了

主要分为三个步骤：获取权限码，缓存权限码，权限对比（v-if或者v-show）

获取权限码

假设我们在登录的时候就获取权限码，下面是login页面登录时发送的请求，将这个结果存入pinia

缓存权限码

在store/permission.js中

提供对应的赋值方法以及缓存

权限对比

在需要的页面中引入，并判断

场景：假设我们的商品上架只有超级管理员才能使用

indexof表示判断一个数组是否包含一个元素，如果包含就返回索引，不包含就返回-1。

大工告成！

实现效果

管理员登录

商家登录

 有没有发现还是太丑了一点？接下来我们来尝试美化一下它

+el-tabs美化

写在前面

这部分，分为快速篇和循序渐进篇两种，如果耐心不够，请看快速篇，如果你觉得还行，可以看循序渐进篇

使用element-plus的tabs标签

分析功能：

  1. 点击菜单栏的时候，如果没有这个tab页，就新增，如果有就跳转
  2. 点击tabs的时候跳转对应的路由
  3. tabs可以被删除

快速篇

主要修改地方：

  1. pinia中定义标签绑定所需的数据
  2. 在路由展示地方添加标签页代码，并设置切换事件
  3. 在菜单渲染组件中添加新增标签页的事件

在pinia中定义标识激活标签页的值和标签页的数据数组，

以及对应的对外提供操作的接口

 路由展示的地方添加标签代码如下

代码如下

  1. <template>
  2.   <div class="common-layout">
  3.     <el-container>
  4.       <el-aside width="200px">
  5.         <div>
  6.           <!-- 菜单侧栏导航栏 -->
  7.           <menus></menus>
  8.         </div>
  9.       </el-aside>
  10.       <el-container>
  11.         <el-header>
  12.           <div class="head_class">
  13.             <!-- 头部 -->
  14.             <Crumbs></Crumbs>
  15.             <div>
  16.               <el-button type="primary" text @click="logOut">注销</el-button>
  17.             </div>
  18.           </div>
  19.         </el-header>
  20.         <el-main>
  21.           <!-- 内容 -->
  22.           <div>
  23.             <el-tabs type="border-card" v-model="tabsActive" @tab-change="gotoActive" @tab-remove="closeTabs">
  24.               <el-tab-pane :label="item.name" :key="item.name"
  25.                            v-for="item in tabsList" :name="item.path" :closable="item.isClose==1" >
  26.               </el-tab-pane>
  27.               <router-view></router-view>
  28.             </el-tabs>
  29.           </div>
  30.         </el-main>
  31.       </el-container>
  32.     </el-container>
  33.   </div>
  34. </template>
  35.  
  36. <script setup>
  37. import menus from "@/components/menu/index.vue";
  38. import {ElMessage, ElMessageBox} from 'element-plus'
  39. import Crumbs from "@/components/CommonComponent/crumbs/index.vue";
  40. import {useMenusStore} from '@/store/permission'
  41. import {useRouter} from "vue-router";
  42. import {ref} from "vue";
  43. import { storeToRefs } from 'pinia'
  44.  
  45. const store = useMenusStore()
  46. const router = useRouter()
  47. let {tabsList,tabsActive}=storeToRefs(store)
  48.  
  49. function logOut() {
  50.   ElMessageBox.confirm('确认退出登录?', '提示', {
  51.     confirmButtonText: '确定',
  52.     cancelButtonText: '取消',
  53.     type: 'warning',
  54.   }).then(async () => {
  55.     /*点击的确认*/
  56.     const b = await store.logout()
  57.     if (b) {
  58.       router.push('/login')
  59.     } else {
  60.       ElMessage({
  61.         showClose: true,
  62.         message: '注销失败',
  63.         type: 'error',
  64.       })
  65.     }
  66.   }).catch(() => {
  67.     /*点击的取消*/
  68.   })
  69. }
  70.  
  71. function closeTabs(name){
  72.   //判断删除的是否是活动页，如果是则删除并跳到首页，
  73.   if(name==store.tabsActive){
  74.     store.setActive('homepage')
  75.     console.log("删除的是当前页",tabsActive)
  76.   }
  77.   store.delTabs(name)
  78. }
  79. function gotoActive(name){
  80.   store.setActive(name)
  81.   router.push(name)
  82. }
  83.  
  84. </script>
  85.  
  86. <style scoped>
  87.  
  88. .head_class {
  89.   display: flex;
  90.   justify-content: space-between;
  91. }
  92.  
  93. /*隐藏侧边栏滚动条*/
  94. .el-aside::-webkit-scrollbar {
  95.   display: none;
  96. }
  97.  
  98. .el-header {
  99.   position: relative;
  100.   width: 100%;
  101.   height: 60px;
  102. }
  103.  
  104. .el-aside {
  105.   display: block;
  106. }
  107.  
  108. .el-main {
  109.   position: absolute;
  110.   left: 200px;
  111.   right: 0;
  112.   top: 60px;
  113.   bottom: 0;
  114.   overflow-y: scroll;
  115. }
  116.  
  117.  
  118. </style>

 在菜单渲组件中定义事件

代码如下

  1. <template>
  2.   <div>
  3.     <template v-for="item in menuList" :key="item.path">
  4.       <!--      分为两种方式渲染：有子菜单和没有子菜单-->
  5.       <el-sub-menu
  6.           :index="item.path"
  7.           v-if="item.nodeType == 1"
  8.       >
  9.         <template #title>
  10. <!--          <el-icon v-show="item.iconId!=null"><img :src="sendIcon(item.iconInfo)" alt="" class="icon_class"/></el-icon>-->
  11.           <span>{{ item.name }}</span>
  12.         </template>
  13.         <!--        有子菜单的继续遍历（递归）-->
  14.         <menuTree :menuList="item.children"></menuTree>
  15.       </el-sub-menu>
  16.       <!--      没有子菜单-->
  17.       <el-menu-item :index="item.path" v-if="item.nodeType==2" @click="clickOnMenu(item)">
  18. <!--        <el-icon v-show="item.iconId!=null">-->
  19. <!--          <img :src="sendIcon(item.iconInfo)" alt="" class="icon_class"/>-->
  20. <!--        </el-icon>-->
  21.         <span>{{ item.name }}</span>
  22.       </el-menu-item>
  23.     </template>
  24.   </div>
  25. </template>
  26.  
  27. <script>
  28. import {getImage} from '@/api/home/file/index'
  29. import {getImageToBase64} from '@/util/file'
  30. import {useMenusStore} from "@/store/permission";
  31. import { storeToRefs } from 'pinia'
  32.  
  33. export default ({
  34.   name: 'menuTree',
  35.   props: {
  36.     menuList: {
  37.       type: Array
  38.     }
  39.   },
  40.   setup(props) {
  41.     let store=useMenusStore()
  42.     async function sendIcon(fileInfo) {
  43.       // 获取菜单图片路径
  44.       if (fileInfo != null) {
  45.         return await getImageToBase64(fileInfo)
  46.       }
  47.     }
  48.     // 点击菜单后添加进入tabs数组，需要注意tabs数组里面是否已经存在，
  49.     function clickOnMenu(node){
  50.       let hasNode=store.tabsList.filter(item=>item.path==node.path)
  51.       if (hasNode.length==0 || hasNode==null){
  52.         store.setTabs(node)
  53.       }
  54.       store.setActive(node.path)
  55.     }
  56.     return {
  57.       sendIcon,
  58.       clickOnMenu
  59.     };
  60.   }
  61. })
  62. </script>
  63.  
  64. <style scoped>
  65. .icon_class {
  66.   width: 30px;
  67.   height: 30px;
  68. }
  69. </style>
  70.

 大功告成，如果你不明白这些步骤并且想要了解，请看循序渐进篇。

循序渐进篇

我们从官网上复制代码，放在哪里呢？

  1. <el-tabs type="border-card">
  2.     <el-tab-pane label="User">User</el-tab-pane>
  3.     <el-tab-pane label="Config">Config</el-tab-pane>
  4.     <el-tab-pane label="Role">Role</el-tab-pane>
  5.     <el-tab-pane label="Task">Task</el-tab-pane>
  6.   </el-tabs>

放在路由展示的地方，还记得我们前面的前期准备那里吗？

  1. <div class="common-layout">
  2.     <el-container>
  3.       <el-aside width="200px">
  4.         <div>
  5.           <!-- 菜单侧栏导航栏 -->
  6.           <menus></menus>
  7.         </div>
  8.       </el-aside>
  9.       <el-container>
  10.         <el-header>
  11.           <div class="head_class">
  12.             <!-- 头部 -->
  13.             <Crumbs></Crumbs>
  14.             <div>
  15.               <el-button type="primary" text @click="logOut">注销</el-button>
  16.             </div>
  17.           </div>
  18.         </el-header>
  19.         <el-main>
  20.           <!-- 内容 -->
  21.           <div>
  22.             <el-tabs type="border-card">
  23.                 <el-tab-pane label="User">
  24.                     
  25.                 </el-tab-pane>
  26.                 <router-view></router-view>
  27.           </div>
  28.         </el-main>
  29.       </el-container>
  30.     </el-container>
  31.   </div>
  32.  
  33.     
  34.  </el-tabs>

当然，只是这样是不行的，由于这个标签页是动态的，我们需要一个数组来代替它的源数据，这个数组呢并不是固定的。在点击菜单栏的时候就需要添加一个，我们也可以在tabs上面点击删除按钮，删除一个标签页。也就是说，对这个数组的操作是跨页面跨组件的。所以我们有限考虑使用pinia来管理。

在前面的pinia基础上，我们新增一个tabsList

并提供一个新增和删除的方法

代码如下：

  1. import {defineStore} from "pinia" // 定义容器
  2. import {getRoleRouter} from "@/api/home/permission/menus";
  3. import {logout} from '@/api/index'
  4. import {isObjectValueEqualNew} from '@/util/Utils'
  5.  
  6.  
  7. export const useMenusStore = defineStore('permission', {
  8.     /**
  9.      * 存储全局状态，类似于vue2中的data里面的数据
  10.      * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
  11.      * 和 TS 类型推导
  12.      */
  13.     state: () => {
  14.         return {
  15.             menuList: [],//菜单信息
  16.             roles: [],//角色信息
  17.             menuRouter: [],//路由信息
  18.             roleIds: [],//角色Id
  19.             tabsList:[{id:1,name:'首页',path:'homepage'}],
  20.             tabsActive:'homepage'
  21.         }
  22.     },
  23.     /**
  24.      * 用来封装计算属性 有缓存功能  类似于computed
  25.      */
  26.     getters: {},
  27.     /**
  28.      * 编辑业务逻辑  类似于methods
  29.      */
  30.     actions: {
  31.         //菜单
  32.         setMenuList(data) {
  33.             this.menuList = data
  34.         },
  35.         //设置路由：data-->后端传入的路由信息
  36.         setMenuRouter(data) {
  37.             data.forEach(item => {
  38.                 //定义一个对象-->routerInfo格式化后端传入的路由信息
  39.                 let routerInfo = {
  40.                     path: '',
  41.                     name: '',
  42.                     meta: '',
  43.                     component: '',
  44.                 }
  45.                 routerInfo.path = `${item.path}`
  46.                 routerInfo.meta = {name: item.name}
  47.                 routerInfo.name = item.name
  48.                 routerInfo.component = () => import(`@/views/${item.linkUrl}`)
  49.                 this.menuRouter.push(routerInfo)
  50.             })
  51.         },
  52.         setRoles(data) {
  53.             this.roles = data
  54.             this.roleIds = data.map(item => {
  55.                 return item.id
  56.             })
  57.         },
  58.         generateRoutes() {
  59.             //获取路由信息
  60.             return new Promise((resolve, reject) => {
  61.                 getRoleRouter(this.roleIds).then(res => {
  62.                     if (res.data.code == 200) {
  63.                         this.setMenuRouter(res.data.data)
  64.                         resolve()
  65.                     } else {
  66.                         reject()
  67.                     }
  68.                 })
  69.             })
  70.         },
  71.         logout() {
  72.             /*注销登录*/
  73.            return  logout().then(res => {
  74.                 if (res.data.code == 200) {
  75.                     this.$reset()//清除状态管理所有数据
  76.                     window.sessionStorage.clear()//清除本地所有缓存
  77.                     return true
  78.                 }
  79.                 else return false
  80.             })
  81.         },
  82.         setTabs(node){
  83.             this.tabsList.push(node)
  84.         },
  85.         delTabs(node){
  86.             /*返回和node不相同的元素，就相当于把相同的元素删掉了*/
  87.             this.tabsList=this.tabsList.filter(item=>{
  88.                 if (item.path==node){
  89.                     return false
  90.                 }
  91.                 else return true
  92.             })
  93.         },
  94.         setActive(value){
  95.           this.tabsActive=value
  96.         }
  97.     },
  98.     // 持久化设置
  99.     persist: {
  100.         enabled: true,	//开启
  101.         storage: sessionStorage,	//修改存储位置
  102.         key: 'permissions',	//设置存储的key,在这里是存在sessionStorage时的键
  103.         paths: ['menuList', 'hasRouter', `roles`, 'roleIds','tabsList','tabsActive'],//指定要持久化的字段，menuRouter不需要缓存。因为每次路由跳转我们都可以重新获取
  104.     },
  105. })

 现在，我们有了这样一个数组，就可以遍历生成了，我们在之前的基础上，修改这部分代码，

从pinia中引入tabsList数组，在标签页中遍历它

  1.  <div>
  2.             <el-tabs type="border-card">
  3.               <el-tab-pane :label="item.name" :key="item.name"
  4.                            v-for="item in tabsList" :name="item.path"  >
  5.                 
  6.               </el-tab-pane>
  7.                 <router-view></router-view>
  8.             </el-tabs>
  9.           </div>
  10.  
  11.  
  12.  
  13. import {useMenusStore} from '@/store/permission'
  14. import {useRouter} from "vue-router";
  15. import {ref} from "vue";
  16. import { storeToRefs } from 'pinia'
  17.  
  18. const store = useMenusStore()
  19. const router = useRouter()
  20. let {tabsList,tabsActive}=storeToRefs(store)

分析 

  1. storeToRefs方法在这里的主要作用是将pinia中的数据变为响应式。如果不使用这个，数组修改后，标签页并不会随之渲染出来
  2. 使用标签页的name属性绑定tabsList存储的路由路径

现在我们能够便遍历显示了，但是还不够，我们需要点击菜单的时候，想这个数组新增元素

我们找到前面的渲染菜单的组件，在点击没有子菜单的菜单上面添加按钮事件

  1.  function clickOnMenu(node){
  2.       let hasNode=store.tabsList.filter(item=>item.path==node.path)
  3.       if (hasNode.length==0 || hasNode==null){
  4. //如果数组里面不存在，新增一个
  5.         store.setTabs(node)
  6.       }
  7.       
  8.     }

当点击菜单的时候，就需要新增一个标签页，如果已经存在，就直接跳转到这个标签页。那么问题来了，在上面的代码中，我们能够新增标签页了，但是如何跳转到这个标签页呢？

我们需要借助标签页的这个属性：

 name属性标识了每一个标签页（tab-pane），而tab的v-model属性绑定了当前激活的标签页。tab绑定的值是哪一个tab-pane的name，那么哪一个tab-pane就是激活页

先不要着急定义这个激活值，我们仔细分析：在点击菜单的时候，不仅要向数组中添加一个新的标签页，还要切换到这个激活的标签页。也就是说，对这个激活值执行赋值的动作是在菜单组件中，而绑定（获取）这个激活值是在展示标签页的组件中，这又是一个跨页面跨组件的共享数据，我们仍然优先定义在pinia中。我们给他一个初始值，在进入页面的时候默认打开首页，

仍然需要提供一个修改的接口

代码在上面已经给出，这里就不在重复了

我们有了这个激活值，就需要绑定，并且考虑到在点击不同的标签页的时候需要切换路由，我们需要在激活值改变的时候，就切换到这个激活值对应的路由上。

修改标签页的代码，我们将数组中的路由路径（path）绑定为name值，closable表示当前标签是否可以被删除，我这里只有首页是不能被删除的

  1. <el-main>
  2.           <!-- 内容 -->
  3.           <div>
  4.             <el-tabs type="border-card" v-model="tabsActive" @tab-change="gotoActive" @tab-remove="closeTabs">
  5.               <el-tab-pane :label="item.name" :key="item.name"
  6.                            v-for="item in tabsList" :name="item.path" :closable="item.isClose==1" >
  7.                 <router-view></router-view>
  8.               </el-tab-pane>
  9.             </el-tabs>
  10.           </div>
  11.         </el-main>
  12.  
  13. <script setup>
  14. import menus from "@/components/menu/index.vue";
  15. import {ElMessage, ElMessageBox} from 'element-plus'
  16. import Crumbs from "@/components/CommonComponent/crumbs/index.vue";
  17. import {useMenusStore} from '@/store/permission'
  18. import {useRouter} from "vue-router";
  19. import {ref} from "vue";
  20. import { storeToRefs } from 'pinia'
  21. import {getToken} from "@/util/token/getToken";
  22.  
  23. const store = useMenusStore()
  24. const router = useRouter()
  25. let {tabsList,tabsActive}=storeToRefs(store)
  26.  
  27. function logOut() {
  28.   ElMessageBox.confirm('确认退出登录?', '提示', {
  29.     confirmButtonText: '确定',
  30.     cancelButtonText: '取消',
  31.     type: 'warning',
  32.   }).then(async () => {
  33.     /*点击的确认*/
  34.     const b = await store.logout()
  35.     if (b) {
  36.       router.push('/login')
  37.     } else {
  38.       ElMessage({
  39.         showClose: true,
  40.         message: '注销失败',
  41.         type: 'error',
  42.       })
  43.     }
  44.   }).catch(() => {
  45.     /*点击的取消*/
  46.   })
  47. }
  48.  
  49. function closeTabs(name){
  50.   //判断删除的是否是活动页，如果是则删除并跳到首页，
  51.   if(name==store.tabsActive){
  52.     store.setActive('homepage')
  53.     console.log("删除的是当前页",tabsActive)
  54.   }
  55.   store.delTabs(name)
  56. }
  57. function gotoActive(name) {
  58.   /*防止退出登录时清楚缓存时触发(active的值发生变动)*/
  59.   if (getToken("token")) {
  60.     store.setActive(name)
  61.     router.push(name)
  62.   }
  63. }
  64.  
  65. </script>

还记得之前我们菜单点击哪里吗？那里只实现了添加标签页的功能还没有实现切换的功能，我们现在只需要在点击事件里面添加切换激活值就行了

后端响应的菜单数据

  1. {
  2. 	"menuPermission": [{
  3. 		"id": "1",
  4. 		"name": "首页",
  5. 		"menuCode": "homepage",
  6. 		"parentId": "0",
  7. 		"nodeType": 2,
  8. 		"sort": 0,
  9. 		"linkUrl": "home/content/index.vue",
  10. 		"iconId": "1",
  11. 		"level": 0,
  12. 		"path": "homepage",
  13. 		"createTime": null,
  14. 		"isClose": 0,
  15. 		"children": [],
  16. 		"iconInfo": null
  17. 	}, {
  18. 		"id": "2",
  19. 		"name": "用户管理",
  20. 		"menuCode": "user_manage",
  21. 		"parentId": "0",
  22. 		"nodeType": 1,
  23. 		"sort": 0,
  24. 		"linkUrl": "home/UserManage",
  25. 		"iconId": "8",
  26. 		"level": 0,
  27. 		"path": "",
  28. 		"createTime": "2023-07-08 19:37:26",
  29. 		"isClose": 1,
  30. 		"children": [{
  31. 			"id": "201",
  32. 			"name": "后台用户管理",
  33. 			"menuCode": "system_user_manage",
  34. 			"parentId": "2",
  35. 			"nodeType": 2,
  36. 			"sort": 1,
  37. 			"linkUrl": "home/content/UserManage/System/index.vue",
  38. 			"iconId": "3",
  39. 			"level": 1,
  40. 			"path": "systemuser",
  41. 			"createTime": "2023-07-08 20:02:04",
  42. 			"isClose": 1,
  43. 			"children": [],
  44. 			"iconInfo": null
  45. 		}, {
  46. 			"id": "202",
  47. 			"name": "商家管理",
  48. 			"menuCode": "business_user_manage",
  49. 			"parentId": "2",
  50. 			"nodeType": 2,
  51. 			"sort": 1,
  52. 			"linkUrl": "home/content/UserManage/Business/index.vue",
  53. 			"iconId": "3",
  54. 			"level": 1,
  55. 			"path": "businessuser",
  56. 			"createTime": "2023-07-08 20:04:40",
  57. 			"isClose": 1,
  58. 			"children": [],
  59. 			"iconInfo": null
  60. 		}, {
  61. 			"id": "203",
  62. 			"name": "前台会员管理",
  63. 			"menuCode": "member_user_manage",
  64. 			"parentId": "2",
  65. 			"nodeType": 2,
  66. 			"sort": 1,
  67. 			"linkUrl": "home/content/UserManage/Member/index.vue",
  68. 			"iconId": "3",
  69. 			"level": 1,
  70. 			"path": "memberuser",
  71. 			"createTime": "2023-07-08 20:07:20",
  72. 			"isClose": 1,
  73. 			"children": [{
  74. 				"id": "20301",
  75. 				"name": "新增前台用户",
  76. 				"menuCode": "member_user_add",
  77. 				"parentId": "203",
  78. 				"nodeType": 3,
  79. 				"sort": 2,
  80. 				"linkUrl": null,
  81. 				"iconId": "3",
  82. 				"level": 2,
  83. 				"path": "",
  84. 				"createTime": "2023-07-18 10:30:56",
  85. 				"isClose": 1,
  86. 				"children": [],
  87. 				"iconInfo": null
  88. 			}, {
  89. 				"id": "20302",
  90. 				"name": "删除用户",
  91. 				"menuCode": "member_user_delete",
  92. 				"parentId": "203",
  93. 				"nodeType": 3,
  94. 				"sort": 2,
  95. 				"linkUrl": null,
  96. 				"iconId": "3",
  97. 				"level": 2,
  98. 				"path": "\n",
  99. 				"createTime": null,
  100. 				"isClose": 1,
  101. 				"children": [],
  102. 				"iconInfo": null
  103. 			}],
  104. 			"iconInfo": null
  105. 		}, {
  106. 			"id": "20303",
  107. 			"name": "用户新增",
  108. 			"menuCode": "user_add",
  109. 			"parentId": "2",
  110. 			"nodeType": 3,
  111. 			"sort": null,
  112. 			"linkUrl": null,
  113. 			"iconId": null,
  114. 			"level": null,
  115. 			"path": "",
  116. 			"createTime": "2023-08-24 21:06:30",
  117. 			"isClose": 1,
  118. 			"children": [],
  119. 			"iconInfo": null
  120. 		}, {
  121. 			"id": "20304",
  122. 			"name": "用户修改",
  123. 			"menuCode": "user_update",
  124. 			"parentId": "2",
  125. 			"nodeType": 3,
  126. 			"sort": null,
  127. 			"linkUrl": null,
  128. 			"iconId": null,
  129. 			"level": null,
  130. 			"path": null,
  131. 			"createTime": "2023-08-24 21:25:00",
  132. 			"isClose": 1,
  133. 			"children": [],
  134. 			"iconInfo": null
  135. 		}],
  136. 		"iconInfo": null
  137. 	}, {
  138. 		"id": "3",
  139. 		"name": "字典管理",
  140. 		"menuCode": "dictionary_manage",
  141. 		"parentId": "0",
  142. 		"nodeType": 2,
  143. 		"sort": 0,
  144. 		"linkUrl": "home/content/DictionaryManage/index.vue",
  145. 		"iconId": "9",
  146. 		"level": 0,
  147. 		"path": "dictionary",
  148. 		"createTime": "2023-07-13 16:45:54",
  149. 		"isClose": 1,
  150. 		"children": [],
  151. 		"iconInfo": null
  152. 	}, {
  153. 		"id": "4",
  154. 		"name": "菜单管理",
  155. 		"menuCode": "menu_manage",
  156. 		"parentId": "0",
  157. 		"nodeType": 2,
  158. 		"sort": 0,
  159. 		"linkUrl": "home/content/MenuManage/index.vue",
  160. 		"iconId": "3",
  161. 		"level": 0,
  162. 		"path": "menu",
  163. 		"createTime": "2023-07-08 19:05:18",
  164. 		"isClose": 1,
  165. 		"children": [],
  166. 		"iconInfo": null
  167. 	}, {
  168. 		"id": "5",
  169. 		"name": "店铺管理",
  170. 		"menuCode": "store_manage",
  171. 		"parentId": "0",
  172. 		"nodeType": 2,
  173. 		"sort": 0,
  174. 		"linkUrl": "home/content/ShopManage/index.vue",
  175. 		"iconId": "6",
  176. 		"level": 0,
  177. 		"path": "shop",
  178. 		"createTime": "2023-07-13 16:29:38",
  179. 		"isClose": 1,
  180. 		"children": [],
  181. 		"iconInfo": null
  182. 	}, {
  183. 		"id": "6",
  184. 		"name": "商品管理",
  185. 		"menuCode": "goods_manage",
  186. 		"parentId": "0",
  187. 		"nodeType": 1,
  188. 		"sort": 0,
  189. 		"linkUrl": "",
  190. 		"iconId": "5",
  191. 		"level": 0,
  192. 		"path": "goods",
  193. 		"createTime": "2023-07-13 16:42:17",
  194. 		"isClose": 1,
  195. 		"children": [{
  196. 			"id": "20305",
  197. 			"name": "商品发布",
  198. 			"menuCode": "goods_add",
  199. 			"parentId": "6",
  200. 			"nodeType": 2,
  201. 			"sort": null,
  202. 			"linkUrl": "home/content/GoodsManage/AddGoods.vue",
  203. 			"iconId": null,
  204. 			"level": null,
  205. 			"path": "addgoods",
  206. 			"createTime": "2023-08-26 14:39:21",
  207. 			"isClose": 1,
  208. 			"children": [],
  209. 			"iconInfo": null
  210. 		}, {
  211. 			"id": "20307",
  212. 			"name": "分类管理",
  213. 			"menuCode": "category_manage",
  214. 			"parentId": "6",
  215. 			"nodeType": 2,
  216. 			"sort": null,
  217. 			"linkUrl": "home/content/GoodsManage/CategoryManage.vue",
  218. 			"iconId": null,
  219. 			"level": null,
  220. 			"path": "category",
  221. 			"createTime": "2023-08-28 11:49:34",
  222. 			"isClose": 1,
  223. 			"children": [],
  224. 			"iconInfo": null
  225. 		}, {
  226. 			"id": "20308",
  227. 			"name": "属性分组",
  228. 			"menuCode": "attrGroup",
  229. 			"parentId": "6",
  230. 			"nodeType": 2,
  231. 			"sort": null,
  232. 			"linkUrl": "home/content/GoodsManage/AttrGroup",
  233. 			"iconId": null,
  234. 			"level": null,
  235. 			"path": "attr-group",
  236. 			"createTime": "2023-09-09 10:09:52",
  237. 			"isClose": 1,
  238. 			"children": [],
  239. 			"iconInfo": null
  240. 		}, {
  241. 			"id": "20310",
  242. 			"name": "规格参数",
  243. 			"menuCode": "attribute_manage",
  244. 			"parentId": "6",
  245. 			"nodeType": 2,
  246. 			"sort": null,
  247. 			"linkUrl": "home/content/GoodsManage/AttributeManage.vue",
  248. 			"iconId": null,
  249. 			"level": null,
  250. 			"path": "attribute",
  251. 			"createTime": "2023-09-12 22:45:52",
  252. 			"isClose": 1,
  253. 			"children": [],
  254. 			"iconInfo": null
  255. 		}, {
  256. 			"id": "20311",
  257. 			"name": "spu管理",
  258. 			"menuCode": "spu-manage",
  259. 			"parentId": "6",
  260. 			"nodeType": 2,
  261. 			"sort": null,
  262. 			"linkUrl": "home/content/GoodsManage/SpuManage.vue",
  263. 			"iconId": null,
  264. 			"level": null,
  265. 			"path": "spu-manage",
  266. 			"createTime": "2023-10-05 22:07:56",
  267. 			"isClose": 1,
  268. 			"children": [],
  269. 			"iconInfo": null
  270. 		}, {
  271. 			"id": "20312",
  272. 			"name": "sku管理",
  273. 			"menuCode": "sku-manage",
  274. 			"parentId": "6",
  275. 			"nodeType": 2,
  276. 			"sort": null,
  277. 			"linkUrl": "home/content/GoodsManage/SkuManage.vue",
  278. 			"iconId": null,
  279. 			"level": null,
  280. 			"path": "sku-manage",
  281. 			"createTime": "2023-10-08 20:41:06",
  282. 			"isClose": 1,
  283. 			"children": [],
  284. 			"iconInfo": null
  285. 		}],
  286. 		"iconInfo": null
  287. 	}, {
  288. 		"id": "7",
  289. 		"name": "订单管理",
  290. 		"menuCode": "order_manage",
  291. 		"parentId": "0",
  292. 		"nodeType": 2,
  293. 		"sort": 0,
  294. 		"linkUrl": "home/content/OrderManage/index.vue",
  295. 		"iconId": "10",
  296. 		"level": 0,
  297. 		"path": "order",
  298. 		"createTime": "2023-07-13 16:43:15",
  299. 		"isClose": 1,
  300. 		"children": [],
  301. 		"iconInfo": null
  302. 	}, {
  303. 		"id": "8",
  304. 		"name": "库存系统",
  305. 		"menuCode": "warehouse_system",
  306. 		"parentId": "0",
  307. 		"nodeType": 1,
  308. 		"sort": 0,
  309. 		"linkUrl": "",
  310. 		"iconId": "4",
  311. 		"level": 0,
  312. 		"path": "warehouse",
  313. 		"createTime": "2023-07-13 16:44:36",
  314. 		"isClose": 1,
  315. 		"children": [{
  316. 			"id": "20313",
  317. 			"name": "商品库存",
  318. 			"menuCode": "goods_inventory",
  319. 			"parentId": "8",
  320. 			"nodeType": 2,
  321. 			"sort": null,
  322. 			"linkUrl": "home/content/WarehouseManage/Inventory.vue",
  323. 			"iconId": null,
  324. 			"level": null,
  325. 			"path": "goods_inventory",
  326. 			"createTime": "2023-10-11 20:42:12",
  327. 			"isClose": 1,
  328. 			"children": [],
  329. 			"iconInfo": null
  330. 		}, {
  331. 			"id": "20314",
  332. 			"name": "仓库维护",
  333. 			"menuCode": "warehouse_manage",
  334. 			"parentId": "8",
  335. 			"nodeType": 2,
  336. 			"sort": null,
  337. 			"linkUrl": "home/content/WarehouseManage/Warehouse.vue",
  338. 			"iconId": null,
  339. 			"level": null,
  340. 			"path": "warehouse",
  341. 			"createTime": "2023-10-13 18:00:55",
  342. 			"isClose": 1,
  343. 			"children": [],
  344. 			"iconInfo": null
  345. 		}, {
  346. 			"id": "20315",
  347. 			"name": "采购单维护",
  348. 			"menuCode": "procurement",
  349. 			"parentId": "8",
  350. 			"nodeType": 1,
  351. 			"sort": null,
  352. 			"linkUrl": null,
  353. 			"iconId": null,
  354. 			"level": null,
  355. 			"path": null,
  356. 			"createTime": "2023-10-14 11:06:24",
  357. 			"isClose": 1,
  358. 			"children": [{
  359. 				"id": "20316",
  360. 				"name": "采购需求",
  361. 				"menuCode": "purchase-detail",
  362. 				"parentId": "20315",
  363. 				"nodeType": 2,
  364. 				"sort": null,
  365. 				"linkUrl": "home/content/WarehouseManage/ProcurementManage/PurchaseDetail.vue",
  366. 				"iconId": null,
  367. 				"level": null,
  368. 				"path": "purchase-detail",
  369. 				"createTime": "2023-10-14 20:50:05",
  370. 				"isClose": 1,
  371. 				"children": [],
  372. 				"iconInfo": null
  373. 			}, {
  374. 				"id": "20317",
  375. 				"name": "采购单",
  376. 				"menuCode": "purchase",
  377. 				"parentId": "20315",
  378. 				"nodeType": 2,
  379. 				"sort": null,
  380. 				"linkUrl": "home/content/WarehouseManage/ProcurementManage/Purchase.vue",
  381. 				"iconId": null,
  382. 				"level": null,
  383. 				"path": "purchase",
  384. 				"createTime": "2023-10-14 20:52:59",
  385. 				"isClose": 1,
  386. 				"children": [],
  387. 				"iconInfo": null
  388. 			}, {
  389. 				"id": "20318",
  390. 				"name": "我的采购单",
  391. 				"menuCode": "my-purchase",
  392. 				"parentId": "20315",
  393. 				"nodeType": 2,
  394. 				"sort": null,
  395. 				"linkUrl": "home/content/WarehouseManage/ProcurementManage/MyPurchase.vue",
  396. 				"iconId": null,
  397. 				"level": null,
  398. 				"path": "my-purchase",
  399. 				"createTime": "2023-10-17 10:57:03",
  400. 				"isClose": 1,
  401. 				"children": [],
  402. 				"iconInfo": null
  403. 			}],
  404. 			"iconInfo": null
  405. 		}],
  406. 		"iconInfo": null
  407. 	}, {
  408. 		"id": "9",
  409. 		"name": "文件管理",
  410. 		"menuCode": "file_manage",
  411. 		"parentId": "0",
  412. 		"nodeType": 2,
  413. 		"sort": 0,
  414. 		"linkUrl": "home/content/FilesManage/index.vue",
  415. 		"iconId": "7",
  416. 		"level": 0,
  417. 		"path": "files",
  418. 		"createTime": "2023-07-28 12:25:50",
  419. 		"isClose": 1,
  420. 		"children": [],
  421. 		"iconInfo": null
  422. 	}, {
  423. 		"id": "10",
  424. 		"name": "角色管理",
  425. 		"menuCode": "role_manage",
  426. 		"parentId": "0",
  427. 		"nodeType": 2,
  428. 		"sort": 0,
  429. 		"linkUrl": "home/content/RoleManage/index.vue",
  430. 		"iconId": "2",
  431. 		"level": null,
  432. 		"path": "role",
  433. 		"createTime": "2023-07-31 16:21:36",
  434. 		"isClose": 1,
  435. 		"children": [],
  436. 		"iconInfo": null
  437. 	}, {
  438. 		"id": "20306",
  439. 		"name": "品牌管理",
  440. 		"menuCode": "brand_manage",
  441. 		"parentId": "0",
  442. 		"nodeType": 2,
  443. 		"sort": null,
  444. 		"linkUrl": "home/content/Brand/BrandManage",
  445. 		"iconId": null,
  446. 		"level": null,
  447. 		"path": "brand",
  448. 		"createTime": "2023-08-28 09:45:03",
  449. 		"isClose": 1,
  450. 		"children": [],
  451. 		"iconInfo": null
  452. 	}]
  453. }

源码地址

我的毕业设计: 后面再说

进入这个仓库找到

附加（动态路由的另一种实现方式）：

对于实现动态路由这一块，不一定非要使用addRoute函数，也可以采用其他思路。

在上面说过，vue的路由初始化后不能直接修改路由数据（包括新增路由，删除路由等操作），既然在初始化之后不能操作，那我们可以在路由初始化之前操作啊！

比如说直接将获取到的路由数据直接在routes数组中添加，和静态路由一块加载。我们找到定义静态路由的route/index.js里面，大概思路如下

然后我们就不需要在路由守卫里使用addroute()函数了

需要注意的是：

  1. 该操作不能在守卫里实现（因为在能进入守卫的时候，意味着路由已经初始化完成了，这个时候不能通过直接修改，只能通过addroute函数）
  2. 你需要确保vue在创建路由的时候，这个getroutes数组的数据就已经处理好了。否则，vue创建（初始化）路由时，这个getroutes还是空的或者还没有处理为路由对象格式，那也是白搭。

局限性：能实现动态路由（加载路由时动态），不能实现动态路由（路由加载后就不是动态了）

这个也很好理解，前者表示加载的路由确实不是写死的，而是动态获取的。后者的意思就是加载后得路由就不能修改了，他就不是动态的了（除非又使用addRoute函数）

注：这个方法并不能完成我们文中的权限路由功能，为什么呢？

        也很好理解，我们获取后端路由数据的时候是什么时候？是在登录成功后！这个时候路由早就初始化了！我们说过，这个方法需要保证获取路由数据在路由加载前就要完成！在路由完成加载前，你能登录吗？不能（都不能访问登录页呢。。。）。

该方法思路来源于一个粉丝私信提问引申而出。虽然他不能实现功能，我写这种方法呢，是希望采用这种方法的伙伴趁早打消这个念头，因为他并不能实现这个功能。他是一个假的“动态路由”！

以上对于该方法的描述均为猜测！！！哈哈，没想到吧？到底能不能实现，自个琢磨去吧

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号