Vue3-admin-element框架学习笔记----5(最终篇--动态路由)

简介: Vue3-admin-element框架学习笔记----5(最终篇--动态路由)

关于左侧的菜单栏呢都是直接添加或者删除,亦或者本地存储router,但是这终究不是长久和方便之计

思路:将全部的router写出来,但是在生成左侧菜单的数组之前进行判断它的权限,进行指定渲染

步骤:

准备:src>config>setting.js>authentication=='all'(改变为后端控制)
src>roouter   写出所有的文件路径和名称
改变接口
加代理
改变本地端口(8090)
permission.js         src>config>permission.js
routes.js                src>src>store>modules>routes
handleRoutes.js     src>utils>handleRoutes.js
1:permission.js
48: accessRoutes = await store.dispatch('routes/setAllRoutes',本地存储参数);
2:routes.js
38:let accessRoutes = convertRouter(本地存储参数);
3:handleRoutes.js
20:delete route.redirect;
47:当后台为主的时候执行该判断
获取到存储到本地的一个数据
调用上面的数组accessRoutes(复制上面的代码改变括号里面的数据)作用:vuex的一个调用方法和获取到指定数据    
'routes/setAllRoutes', a.roles     routes/setAllRoutes:roters(src>store>modules>routes)里面的setAllRoutes函数
convertRouter(a.roles)方法里面的数据改成你自己的本地数据    convertRouter是src>utils里面的函数 目的是调用选择注册路由
删除数组里面的redirect,因为他指向是他本身


相关文章
|
2月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
44 3
|
2月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
105 6
|
2月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
2月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
836 0
|
2月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
204 1
|
3月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
vue项目中使用vue-router进行路由配置及嵌套多级路由
|
2月前
|
JavaScript 索引
Vue 3 数组变更详解:哪些操作会修改原数组?| 笔记
在处理数组时,了解哪些操作会修改原数组,哪些操作不会修改原数组,对高效编写 Vue 应用程序至关重要。本文将详细介绍 Vue 3 中的常见数组操作,并按照是否会修改原数组进行分类说明。
165 2
|
2月前
|
JavaScript 前端开发 UED
|
2月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
2月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能