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中制作假数据然后通过后端接口返回的数据进行对比,相等的显示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/296585.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CNN——GoogLeNet

1.GoogLeNet简介 GoogLeNet是谷歌推出的基于Inception模块深度卷积神经网络结构。L和N大写还是为了致敬LeNet。在随后的两年中一直在改进,形成了Inception V2、Inception V3、Inception V4等版本。GoogLeNet(Inception-V1),在Imag…

鸿蒙学习笔记

DevEco Studio, ArkTS, ArkUI, ArkCompiler, DevEco Testing是啥 DevEco Studio是华为开发的一款集成开发环境(IDE),用于开发基于华为鸿蒙操作系统(HarmonyOS)的应用程序。它提供了丰富的开发工具和功能,包…

武汉灰京文化:技术先锋辐射游戏行业,带来全新体验乐趣无穷!

科技的持续演进,给游戏产业打了强心剂,让这个领域变得前所未有的越来越好玩儿。今天我们将深入探讨如何利用虚拟现实(VR)和增强现实(AR)技术,让你玩得开心,玩得尽兴。 想象一下&…

在pycharm中jupyter连接上了以后显示无此库,但是确实已经安装好了某个库,使用python可以跑,但是使用ipython就跑不了

今天遇到一个事情,就是用pycharm的jupyter时,连接不上,后来手动连接上了以后,发现环境好像不对。 一般来说,这里会是python3,所以里面的环境也是普通python的环境,并没有我下载的库,…

计算机毕业设计-----SSM餐厅点餐收银管理系统

项目介绍 用于餐厅的收银管理系统,包含了四个模块 1.桌位模块 桌位模块主要是用于管理桌位的模块,包括点菜到结账的流程 将桌位人数设置为0可以滞空当前桌位 2.账单模块 账单模块记录了每一天的帐单汇总,同时提供了年月日账单的统计&#x…

mysql之CRUD和常见函数和UNION 和 UNION ALL

mysql之CRUD和常见函数和UNION 和 UNION ALL 一.CRUD1.创建(Create) - 插入数据2.读取(Read) - 查询数据3.更新(Update) - 修改数据4.删除(Delete) - 删除数据 二.函数1.字符串函数&…

二刷Laravel 教程(构建页面)总结Ⅰ

L01 Laravel 教程 - Web 开发实战入门 ( Laravel 9.x ) 一、功能 1.会话控制(登录、退出、记住我) 2.用户功能(注册、用户激活、密码重设、邮件发送、个人中心、用户列表、用户删除) 3.静态页面(首页、关于、帮助&am…

五、Spring AOP面向切面编程(基于XML方式实现)

本章概要 Spring AOP基于XML方式实现(了解)Spring AOP对获取Bean的影响理解 根据类型装配 bean使用总结 5.6 Spring AOP基于XML方式实现(了解) 准备工作 加入依赖 <!-- spring-aspects会帮我们传递过来aspectjweaver --> <dependency><groupId>org.spr…

Langchain模板-LangChainTemplates 讲解及应用

langchain官方链接&#xff1a;https://github.com/langchain-ai/langchain/tree/master/templates 其他相关链接&#xff1a; https://python.langchain.com/docs/templates https://templates.langchain.com/ Langchain模板&#xff0c;提供一系列的易于部署的参考架构&a…

基于 Python+Django 技术栈,我开发了一款视频管理系统

学习过程中&#xff0c;遇到问题可以咨询作者 大家好&#xff0c;作为一名开发人员&#xff0c;平时比较愿意动手尝试各种有意思工具&#xff0c;因为笔者非常喜欢观看视频&#xff0c;尤其是YouTube、bilibili都是笔者非常喜欢的视频网站&#xff0c;所以想自己实现一个视频点…

Java/JDK下载安装与环境配置

Java由Sun Microsystems&#xff08;现在是Oracle的子公司&#xff09;于1995年首次发布。它是一种面向对象的编程语言&#xff0c;广泛应用于Web开发、移动应用程序开发、桌面应用程序开发和企业级应用程序开发等领域。 Java语言的主要特点是跨平台、可移植性强、安全性高和具…

代码随想录-刷题第四十八天

198. 打家劫舍 题目链接&#xff1a;198. 打家劫舍 思路&#xff1a;当前房屋偷与不偷取决于前一个房屋和前两个房屋是否被偷了。这里就更感觉到&#xff0c;当前状态和前面状态会有一种依赖关系&#xff0c;那么这种依赖关系都是动规的递推公式。动态规划五步曲&#xff1a;…

C#编程-实现继承

C#允许您通过扩展现有类的功能以创建新类来实现继承。 从基类创建派生类 使用以下语法在C#中创建派生类: class <derived_class>:<base_class>{...}确定继承的层次结构 要确定继承层次结构,必须检查派生类与基类之间的关系种类。确保派生类是一种基类。 请考虑以…

【深度学习】SDXL tensorRT 推理

stabilityai/stable-diffusion-xl-1.0-tensorrt 项目&#xff1a;https://huggingface.co/stabilityai/stable-diffusion-xl-1.0-tensorrt TensorRT环境&#xff1a; git clone https://github.com/rajeevsrao/TensorRT.git cd TensorRT git checkout release/9.2stabilitya…

数据结构—图(上)

文章目录 12.图(上)(1).图的基本概念#1.图的基本定义#2.边的分类#3.数据结构的一些规定#4.子图#5.完全图#6.路径#7.连通性和连通分量#8.度 (2).图的存储方式#1.邻接矩阵#2.邻接表 (3).图的遍历#1.深度优先搜索(Depth First Search)i.走个迷宫ii.DFS的思想iii.代码实现 #2.广度优…

基于SSM的图书商城(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的图书商城&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMv…

word2019保存后的图片变模糊了怎么办?Word 2019 默认保存后压缩变模糊的问题,解决方案

Word 2019 默认保存后压缩变模糊的问题&#xff0c;解决方案 1&#xff0c;新建word 文件&#xff0c;插入一张原始图片&#xff0c;1080*1920&#xff0c;如下图&#xff1a; 2&#xff0c;保存时&#xff0c;word 2019默认选项&#xff0c;导致word 保存后&#xff0c;图片…

MySQL-DQL

DQL是数据查询语言&#xff0c;用来查询数据库中表中的数据。 DQL语句编写顺序和执行顺序&#xff1a; 编写顺序&#xff1a;由上至下 执行顺序&#xff1a; 基本查询 1. 查询多个字段&#xff1a;SELECT 字段1,字段2,字段3... FROM 表名; 查询所有字段&#xff1a; SELECT*FR…

【C程序设计】C数组

C 语言支持数组数据结构&#xff0c;它可以存储一个固定大小的相同类型元素的顺序集合。数组是用来存储一系列数据&#xff0c;但它往往被认为是一系列相同类型的变量。 数组的声明并不是声明一个个单独的变量&#xff0c;比如 runoob0、runoob1、...、runoob99&#xff0c;而…

数据结构(JS实现)

目录 链表链表的特点链表中的常见操作单链表append(data)尾部追加新节点toString()输出链表的节点数据插入节点insert(position,data)get(position)获取链表指定位置节点的数据indexOf(data)查找对应数据节点的位置update(position, newData)更新指定位置节点数据removeAt(posi…