当前位置: 首页 > news >正文

element-ui 路由动态加载功能

第一步 自定义默认的静态路由像登陆和首页这些一般开放的页面,主要代码如下:

	const router = new Router({routes: [{path: "/login/index",component: () => import("../components/page/login/index.vue"),meta: {title: "登录",keepAlive: true}}, {path: "/",redirect: "/index",component: () => import("../components/page/index/index.vue"),meta: {title: "php平台开发"},children: [{path: "/index",component: () => import("../components/page/index/index.vue"),name: "Home",meta: {title: "首页",keepAlive: true}}]}]});

第二步 在登录的时候从登陆接口获取的路由菜单数据保存到本地的localstorage里面

localStorage.setItem('adminRoutes', JSON.stringify(adminRoutes));    //adminRoutes是从登陆接口成功返回的路由菜单tree数据

第三步 在路由的文件中获取第二步保存的路由菜单数据动态添加路由

let adminRoutes = JSON.parse(localStorage.getItem('adminRoutes'));
//判断如果存在则动态添加路由
if(adminRoutes){adminRoutes.forEach(function (item, index) {let menu = item.menu;menu.forEach(function (item_data,key){console.log(item_data); //输出数组的每一个元素})})
}

第四步 明天写

http://www.lryc.cn/news/118174.html

相关文章:

  • (学习笔记-进程管理)进程调度
  • 十分钟python入门 正则表达式
  • 关于数据拷贝赋值方法
  • Effective Java笔记(32)谨慎并用泛型和可变参数
  • 数据结构——双向链表
  • Declare 关键字在 TypeScript 中如何正确使用?
  • ChatGPT将会成为强者的外挂?—— 提高学习能力
  • AUTOSAR规范与ECU软件开发(基础篇)1.3 车用控制器软件标准(从OSEK到AUTOSAR)
  • R语言5_安装Giotto
  • centos按用户保存历史执行命令
  • 【力扣】61. 旋转链表 <快慢指针>
  • 编写一个指令(v-focus2end)使输入框文本在聚焦时焦点在文本最后一个位置
  • Virtualbox设置访问外网以及主机和虚拟机互通
  • 请简述React是什么?React的主要特点有哪些?React中有哪些主要组件?
  • DevOps最佳实践和工具在本地环境中的概述
  • kafka和rabbitmq之间的区别以及适用场景
  • python——案例15:判断奇数还是偶数
  • springboot汽车租赁后台java出租客户管理jsp源代码mysql
  • Linux学习之sed删除、追加、插入、更改、读写文件、下一行、打印、退出和seq命令
  • JuiceFS 在多云存储架构中的应用 | 深势科技分享
  • 什么是DNS的缓存?
  • smtplib.SMTPHeloError: (500, b‘Error: bad syntax‘)
  • /proc directory in linux
  • 装饰器模式(C++)
  • matlab使用教程(12)—随机数种子和随机数流
  • 【Java】JVM GC配置指南
  • 11.Eclipse 注释模板的说明及设置
  • Maven父子工程项目的配置
  • jumpserver命令记录膨胀问题
  • ControlNet