分享vue-element-admin 实现动态路由的思路

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录结构

  1. 需要用到权限控制的话，可以直接克隆这个分支

  2. https://gitee.com/panjiachen/vue-admin-template/tree/permission-control/

2.文件目录下分别有两个permission.js文件，与main.js同级的是全局路由前置守卫，因此每次页面跳转都会经过src/permission.js

  1. modules下面的的permission.js负责校验不同用户的路由，并把路由表保存到vuex中

大致思路

1.在main.js引入了src/permission.js，因此src/permission.js下的router.beforeEach()也会全局生效，

而src/permission.js也会依赖 store/module/permission.js，不过是以vuex的方式调用

2. 如果重新刷新页面，vuex里的数据就会丢失，而在src/permission.js的代码中，如果vuex的数据丢失了，就要通过dispatch，异步请求“获取个人信息”接口。（注：动态路由设置来到这里开始改变），

在没有动态路由的情况下，我们判断个人信息获取成功了，就代表登录仍有效，可以直接next(),而如果是动态路由的话，我们还需要对路由进行处理

3.我们在获取个人路由表之后，通过vuex里的方法来处理路由表，这里开始用到modules下面的的permission.js我们会对请求回来的个人路由表（menus）通过GenerateRoutes处理成前端路由适用的格式，再通过router的addRouters方法生成前端可访问路由表；注：这个可访问路由表可以存在vuex里，也可以用过promise返回，道理是一样的。

4.因为后端返回的格式与字段大部分情况下前端是不能直接用的，需要多层遍历生成对应的格式，这里有多种方式，具体找网上的例子就可以（推荐https://github.com/macrozheng/mall-admin-web）。最后得出这种字段和格式，跟我们router里的字段是一样的，调用addRouters就可以了。

以上是 分享vue-element-admin 实现动态路由的思路 的全部内容， 来源链接： utcz.com/z/378221.html

回到顶部