vue3-admin-element框架实现动态路由(根据接口返回)

第一步:在src-utils-handleRoutes,修改代码:

export function convertRouter(routers) {
  let array = [];
  for (let i in routers) {
    for (let s in asyncRoutes) {
      if (routers[i].path == asyncRoutes[s].path) {
        array.push({ ...asyncRoutes[s] });
        if (s != 0) array[s].children = [];
        for (let o in routers[i].children) {
          for (let p in asyncRoutes[s].children) {
            if (
              routers[i].children[o].path == asyncRoutes[s].children[p].path &&
              routers[i].children[o].path != '/index'
            ) {
              array[s].children.push(asyncRoutes[s].children[p]);
            }
          }
        }
      }
    }
  }
  return array;
}

第二步登录后存储菜单数据:

第三部:因为框架默认为前端控制路由所以需要在src-config-setting文件将authentication改为all

第四步:找到src-config-permission ,获取登录成功后存储的菜单列表

第五步:找到src--store-modules-routes.js

async setAllRoutes({ commit }) {

let data = JSON.parse(localStorage.getItem('data'));

let menu = data.data.menu;

let accessRoutes = convertRouter(menu);

commit('setAllRoutes', accessRoutes);

return accessRoutes;

},

总结:此方法需要先在router index.js中制作假数据然后通过后端接口返回的数据进行对比,相等的显示

相关推荐
科技探秘人几秒前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR6 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香8 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969311 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai16 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc20 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91525 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#