Vue + Element Plus 实现权限管理系统(四):动态添加路由
发布网友
发布时间：2024-09-09 15:30
共1个回答
热心网友
时间：2024-11-14 03:58
Vue路由包含name、path、component等属性，其中component属性是一个返回模块的函数。然而，后端返回的菜单列表却是一个字符串，如aa/bb。因此，我们需要一个函数将后端菜单列表处理成路由格式。为此，在utils目录下新建filterRoute.ts文件。
使用import.meta.glob("../views/**/*.vue")可以匹配到views目录下所有后缀为.vue的文件，然后通过对比后端返回的component与views/后面的路径来生成Vue路由中component所需的格式。如果菜单是父菜单，则其不能有component属性。根据这些规则，如果菜单component配置了aa/bb，则需要在views目录下创建aa/bb.vue文件来匹配当前组件路径。
Pinia是一个强大的状态管理器，可以方便地管理全局状态。首先安装Pinia，然后在main.ts中注册。新建store/index文件用于存放Pinia管理的状态，并定义了获取菜单的方法GenerateRoutes。
在路由配置文件router/index.ts中，我们先定义好公共路由页面，然后在路由守卫beforeEach中使用addRoute进行动态路由添加，并定义一个白名单路由列表，目前只有一个login页面表示直接放行。
当修改菜单表中子菜单2.1的component为test2/index时，需要在views目录下新建test2/index.vue文件。在layout/components/sidebar.vue中处理菜单选择事件，其中getPath中的d参数代表当前菜单的父菜单和子菜单index的数组，即父菜单的path和子菜单path，如['aa','bb']，根据它们进行相应的路由跳转。最后点击子菜单2.1，该页面就会被渲染出来。
至此，动态路由添加基本完成。当然，可能还有一些细节需要处理，后续将进一步完善。若想系统地了解权限管理系统的搭建，可以关注Vue + Element Plus 实现权限管理系统(前端篇)和NestJS实现权限管理系统(后端篇)专栏。如果只对前端感兴趣，则关注前端篇即可。
