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

news2024/9/23 19:17:57

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

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

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

第三部:因为框架默认为前端控制路由所以需要在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中制作假数据然后通过后端接口返回的数据进行对比,相等的显示

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何下载 ASTR 数据

ASTR (Advanced Spaceborne Thermal Emission and Reflection Radiometer) 卫星是由美国宇航局 (NASA) 和日本国家航空航天局 (JAXA) 合作开发和运营的。ASTR 主要用于地球观测,其主要仪器包括三个子系统: VNIR (Visible and Near Infrared) 子系统&…

C++矩阵例题分析(3):螺旋矩阵

一、审题 时间限制:1000ms 内存限制:256MB 各平台平均AC率:14.89% 题目描述 输出一个n*n大小的螺旋矩阵。 螺旋矩阵的样子: 输入描述 共一行,一个正整数n,表示矩阵变长的长度…

掌握 Postman Newman:快速启动 API 测试自动化

Postman 中的 Newman 是什么? Newman 是一个 CLI(命令行界面)工具,用于运行 Postman 中的集合(Collection)和环境(Environment)来进行自动化测试。它允许直接从命令行运行 Postman …

Docker数据卷详解

文章目录 数据卷1 cp命令2 数据卷2.1 数据卷类型2.2 宿主机数据卷2.3 命名的数据卷2.4 匿名数据卷2.5 清理数据卷2.6 数据卷容器 数据卷 ​ 当我们在使用docker容器的时候,会产生一系列的数据文件,这些数据文件在我们删除docker容器时是会消失的&#x…

thinkphp学习04-控制器定义

控制器,即 controller,控制器文件存放在 controller 目录下; 如果想改变系统默认的控制器文件目录,可以在 config 下 route.php 配置: 将controller修改为controller123,就会报错,说明这个配置…

Tecplot 各版本安装指南

Tecplot下载链接 https://pan.baidu.com/s/1XbzjHnho8zIF7eC4KBFmgA?pwd0531 1.鼠标右击【Tecplot 360 EX 2023(64bit)】压缩包(win11及以上系统需先点击“显示更多选项”)【解压到 Tecplot 360 EX 2023(64bit)】。①解压前:需要先关闭“所…

C# 使用匿名管道进行本地进程间通信

目录 写在前面 代码实现 客户端进程 服务端进程 调用示例 写在前面 相对于命名管道通讯方式而言,匿名管道开销更小,更轻松便捷;缺点就是无法进行网络通讯,只能在本机使用,应用场景相对狭窄;适合于本地…

数据结构之哈希——学习笔记

今天看网课学习了哈希的数据结构,写下这一篇博客记录自己的学习过程。 1.哈希简介: 我们发现某些时候映射到小集合的时候会同时有多个值映射到一个下标里面,所以接下来是这种情况的解决方案1: 我们考虑当两个数字映射之后的结果…

用js计算 m-n 之间所有数的和

<script>let mprompt(输入小值)let nprompt(输入大值)function fn(min,max){let sum0for(let imin;i<max;i){sumi}return sum}let allfn(m,n)console.log(和&#xff1a;${all})</script> 效果&#xff1a;

Docker一键极速安装Nacos,并配置数据库!

1 部署方式 1.1 DockerHub javaedgeJavaEdgedeMac-mini ~ % docker run --name nacos \ -e MODEstandalone \ -e JVM_XMS128m \ -e JVM_XMX128m \ -e JVM_XMN64m \ -e JVM_MS64m \ -e JVM_MMS64m \ -p 8848:8848 \ -d nacos/nacos-server:v2.2.3 a624c64a1a25ad2d15908a67316d…

51单片机定时/计数器相关知识点

51单片机定时/计数器相关知识点 结构组成 51单片机的定时/计数器中有两个寄存器&#xff1a; T0&#xff1a;低位&#xff1a;TL0&#xff08;字节地址8AH&#xff09;高位&#xff1a;TH0&#xff08;字节地址8CH&#xff09;T1&#xff1a;低位&#xff1a;TL1&#xff08…

【java】期末复习知识点

简单不先于复杂&#xff0c;而是在复杂之后。 文章目录 填空题封装包主类开发过程的改变interfaceabstract class访问控制关键字继承多态object 类Java I/O(输入/输出)异常线程和进程创建线程的两种基本方法 编程题Hello World编写Swing程序&#xff0c;显示一个空白窗口 填空题…

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

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

阿里云服务器 使用Certbot申请免费 HTTPS 证书及自动续期

前言 Certbot是一款免费且开源的自动化安全证书管理工具&#xff0c;由电子前沿基金会&#xff08;EFF&#xff09;开发和维护&#xff0c;是在Linux、Apache和Nginx服务器上配置和管理SSL/TLS证书的一种机制。Certbot可以自动完成域名的认证并安装证书。 一、 安装软件 1.1…

噬菌体序列分析工具PhaVa的使用和使用方法

github: 25280841/PhaVa: Adapting the phasefinder approach for identifying phase variation to long reads (github.com) 挺简单的&#xff0c;这里就不翻译了&#xff0c;大家看着直接用吧。 PhaVa PhaVa is an approach for finding potentially Phase Variable invert…

11.2 Linux串口驱动框架

tty 驱动程序框架 tty 驱动程序从下往上分别是设备驱动层、行规程、终端虚拟化、TTY I/O层&#xff0c;它们的功能如下&#xff1a; 设备驱动层&#xff1a;用于驱动设备&#xff0c;如串口、显示器、键盘等。行规程&#xff1a;用于处理控制字符、回显输入数据、缓存输入数据…

状态机(有限状态机(Finite State Machine, FSM)、推进自动机(Pushdown Automata)、并发状态机、分层状态机)

文章目录 状态机&#xff08;State Machine&#xff09;定义与组成定义组成状态&#xff08;States&#xff09;事件&#xff08;Events&#xff09;转换&#xff08;Transitions&#xff09;初始状态&#xff08;Initial State&#xff09; 状态机的类型有限状态机&#xff08…

Spark MLlib简介与机器学习流程

在大数据领域&#xff0c;机器学习是一个关键的应用领域&#xff0c;可以用于从海量数据中提取有价值的信息和模式。Apache Spark MLlib是一个强大的机器学习库&#xff0c;可以在分布式大数据处理环境中进行机器学习任务。本文将深入介绍Spark MLlib的基本概念、机器学习流程以…

MediaPipeUnityPlugin Win10环境搭建(22年3月的记录,新版本已完全不同,这里只做记录)

https://github.com/homuler/MediaPipeUnityPlugin You cannot build libraries for Android with the following steps. 1、安装msys2配置系统环境变量Path添加 C:\msys64\usr\bin 执行 pacman -Su 执行 pacman -S git patch unzip 2、安装Python3.9.10 勾选系统环境变量 …

LINUX服务器防火墙nf_conntrack问题一例

一、故障现象 业务反馈服务异常,无法响应请求&#xff0c;从系统日志 dmesg 或 /var/log/messages 看到大量以下记录&#xff1a;kernel: nf_conntrack: table full, dropping packet. 二、问题分析 业务高峰期服务器访问量大&#xff0c;内核 netfilter 模块 conntrack 相关参…