element-ui 路由动态加载功能

news/2024/7/10 1:37:18 标签: elementui, vue

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

	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){

}

第四步 明天写


http://www.niftyadmin.cn/n/4926187.html

相关文章

sql 分组讨论,二级分组(非2个字段分组),使用 窗口函数和普通分组实现

1. 二级分组需求 先按照一个字段分组,在按照 第二个字段分组。之后,如果 这个 二级分组中的数据,是 > 1条的。就筛选出来。 比如: 先按照 站点分组,再按照 设备分组, 即:如果站点上配置了…

Vue3 + Element-plus Tree 组件的 @check 事件使用方案

在 Vue 3 中使用 ElementUI 的 Tree 组件的 check 事件与 Vue 2 类似。你可以通过监听 check 事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用 check 事件: 首先,确保你已经安装了 ElementUI 组件库。在你的 Vue 组件中,使用 Tree…

在时间和频率域中准确地测量太阳黑子活动及使用信号处理工具箱(TM)生成广泛的波形,如正弦波、方波等研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

leetcode 2616. 最小化数对的最大差值

在数组nums中找到p个数对,使差值绝对值的和最小。 思路: 最小差值应该是数值相近的一对数之间产生,让数值相近的数字尽量靠在一起方便计算,所以需要排序。 这里不去直接考虑一对对的数字,而是直接考虑差值的取值。 …

LeetCode //C - 290. Word Pattern

290. Word Pattern Given a pattern and a string s, find if s follows the same pattern. Here follow means a full match, such that there is a bijection between a letter in pattern and a non-empty word in s. Example 1: Input: pattern “abba”, s “dog c…

vuejs 设计与实现 - 渲染器的设计

渲染器与响应式系统的结合 本节,我们暂时将渲染器限定在 DOM 平台。既然渲染器用来渲染真实 DOM 元素,那么严格来说,下面的函数就是一个合格的渲染器: // 渲染器: function renderer(domString, container) {container.innerHTM…

linux内核bitmap之setbit汇编实现

内核版本:kernel 0.12 首先看一段代码,下面这段代码来自内核版本0.12的mm/swap.c中: // mm/swap.c #define bitop(name,op) \static inline int name(char * addr,unsigned int nr) \ { \int __res; \__asm__ __volatile__("bt" …

MySQL5.7数据库、Navicat Premium1.6可视化工具安装教程【详细教程】

文章目录 一、MySQL、Navicat、注册机地址二、安装(一)、MySQL安装(二)、Navicat Premium安装(三)、集活Navicat Premium 三、遇到的问题1、Are you sure your navicat has not beenpatched/modified befor…