动态添加/注册路由之addRoutes

addRoutes：动态添加/注册路由，一般多用于后台返回菜单树的管理系统。

解决管理系统权限时一般可采用路由守卫按权限限制是否允许访问某些路由，但当权限分类众多、或者是时而有某些路由时而又没有时，用路由守卫可能将写众多判断，更不利于后期维护，这时候的路由守卫看起来不再是那么合适了。

用addRoutes会有不一样的结果吗？动态添加路由将会从根源上切死访问权限，而不是去判断。设想一下，假如一个路由都不存在，那你去访问它，还需要去做大量判断他是否有权限吗？

当然如果不是后台返回菜单树，那两种解决方案可能看起来差别并不是很大，因需要前端去判断是否去注册该路由，这种方式与添加路由守卫去判断时候允许访问该路由的代码逻辑量区别不大

总体来说如果是后台返回菜单树，建议使用addRoutes，如果不返回菜单树则根据权限是否简单明了去区分，如果简单明了则使用路由守卫，否则建议采用addRoutes(路由守卫也并不是不行)

addRoutes用法实例(下例是在app.vue中使用，具体看实际需求)：

import { mapActions } from 'vuex'
export default {name: 'App',data(){return{}},created(){//使用定时器模拟请求后台获取菜单树setTimeout(()=>{//获取菜单树success,假设返回实例如下var menuTree = [{name:'首页',//路由名称disabled:false,//是否具有访问权限,true代表被禁用},{name:'订单',disabled:false,children:[{name:'历史订单',disabled:true,},{name:'进行中订单',disabled:false,},{name:'订单详情',disabled:false,},]},{name:'我的',disabled:true,children:[{name:'我的钱包',disabled:true,},{name:'我的信息',disabled:true,},]},];//根据返回菜单树与前端拟定菜单树逻辑处理（匹配vue组件），获取出实际菜单树//前端拟定菜单树假设如下var draftTree = [{name:'首页',//路由名称path:'index',//路由component:()=>import("@/pages/index")//对应的vue组件},{name:'订单',path:'order',component:()=>import("@/pages/order"),children:[{name:'历史订单',path:'orderHistory',component:()=>import("@/pages/order/history"),},{name:'进行中订单',path:'orderNew',component:()=>import("@/pages/order/new"),},{name:'订单详情',path:'orderDetails',component:()=>import("@/pages/order/details"),},]},{name:'我的',path:'a',component:()=>import("@/pages/a"),children:[{name:'我的钱包',path:'ab',component:()=>import("@/pages/a/ab"),},{name:'我的信息',path:'ac',component:()=>import("@/pages/a/ac"),},]},];//逻辑处理此处省略（遍历menuTree，匹配插入所需字段），处理结果如下var menuArr = [{name:'首页',//路由名称disabled:false,//是否具有访问权限,true代表被禁用path:'index',//路由component:()=>import("@/pages/index")//对应的vue组件},{name:'订单',disabled:false,path:'order',component:()=>import("@/pages/order"),children:[{name:'历史订单',disabled:true,},{name:'进行中订单',disabled:false,path:'orderNew',component:()=>import("@/pages/order/new"),},{name:'订单详情',disabled:false,path:'orderDetails',component:()=>import("@/pages/order/details"),},]},{name:'我的',disabled:true,children:[{name:'我的钱包',disabled:true,},{name:'我的信息',disabled:true,},]},];//将菜单添加至vuex，供菜单组件展示使用this.setMenus(menuArr);//遍历匹配生成后的菜单树(此树两层，如果是四层以及以上可以考虑递归)，生成router树var routeTree = [];for(var i = 0 ; i < menuArr.length ; i++){if(!menuArr[i].disabled){if(menuArr[i].children){var children = [];for(var j = 0 ; j < menuArr[i].children.length ; j++){if(!menuArr[i].children[j].disabled){children.push({path: menuArr[i].children[j].path,name: menuArr[i].children[j].path,component: menuArr[i].children[j].component,})}}if(children.length){children.push({path: '/',redirect: children[0].path})children.push({path: '*',redirect: children[0].path})}routeTree.push({path: '/' + menuArr[i].path,component: menuArr[i].component,children})}else{routeTree.push({path: '/' + menuArr[i].path,name: '/' + menuArr[i].path,component: menuArr[i].component,})}}}if(routeTree.length){routeTree.push({path: '/',redirect: routeTree[0].path})routeTree.push({path: '*',redirect: routeTree[0].path})}else{routeTree.push({path: '/fail',name: 'fail',component: ()=>import("@/components/fail")})routeTree.push({path: '/',redirect: '/fail'})routeTree.push({path: '*',redirect: '/fail'})}//注册路由this.$router.addRoutes(routes)//路由注册完成后跳转if(routeTree.length){this.$router.push({path: routeTree[0].path})}else{this.$router.push({path: '/fail'})}},1000)},methods:{...mapActions({setMenus: 'setMenus'}),}
}

动态添加/注册路由之addRoutes相关推荐

vueRouter动态添加根路由和子路由
需求:项目为分模块开发,监听到路由地址变化后会动态加载对应的模块,从而动态为框架添加相应的路由. 但是有些路由是框架内的页面,有些路由是根路由,比如登录页面是根路由页面,占据整个页面,而业务页面是框架 ...
动态添加的路由直接访问_VUE 动态路由（二）
上一篇介绍了一种动态路由的方案,由前端写好路由表,然后通过登陆用户的角色来匹配出需要的路由.今天来研究下另外一种方案,后端返回路由表,然后生成导航菜单. 先讲下场景,同样是做权限控制,要根据登陆者的角 ...
vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
使用addRoutes动态添加路由
登录是获取添加的路由,存在vuex中 login.vue import {initRoutes} from "@/router/index.js"; // 按需引入路由的动态注入方 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
Vue2.x动态添加路由实现
适用于:Vue2.x VueRouter3.x 动态添加路由一般应用于受权限控制的路由菜单,由后端返回可以判断该角色具有的权限,前端处理出一份符合权限的路由表,使用addRoutes方法动态添加权限路 ...
Vue路由的动态添加和缓存
1.addRouter和addRouters 二者都是动态添加路由.其中addRouters和addRouter的用法差不多,只不过addRouters中要传入数组 router.addRouters ...
动态添加路由 addRoute添加路由刷新404
文章目录动态添加路由案例初步动态添加路由-使用导航守卫解决刷新404问题完整代码: 动态添加路由大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...

动态添加/注册路由之addRoutes

动态添加/注册路由之addRoutes相关推荐

最新文章

热门文章