vue addRoutes路由动态加载操作
需求:增加权限控制,实现不同角色显示不同的路由导航
思路:每次登陆后请求接口返回当前角色路由
核心方法:vue-router2.2.0的addRoutes方法+vuex
以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失。同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中
获取菜单之前先判断routerState,避免多次请求,我这里使用element-ui的导航菜单功能v-for循环this.myRouter参数即可显示动态路由导航
/** *获取菜单 */ getMenu(){ if(this.$store.getters.routerState===false){ //清理已经存在的动态路由 this.clearDynamicRoute() //更改请求路由状态为true this.$store.commit('SET_ROUTERSTATE',true) getMyMenu().then((res)=>{ if(res.code==='0'){ //格式化路由,将数据转为addRoutes可接受的route格式数组 letmyMenu=this.formatMenu(res.data.menu) if(myMenu.length<=0){//没有动态路由 return } for(letindex=0;index补充知识:vue+element进入不同路由页面(二级页面),让相应的左侧菜单
路由配置
{ path:'/finance', name:'Finance', meta:{ title:'财务' }, component:()=> import('@/components/Finance'), redirect:'/finance/code/code', children:[{ path:'/finance/code', name:'financeindex', meta:{ title:'税收配置' }, redirect:'/finance/code/code', component:()=> import('@/components/finance/financeindex'), children:[{ path:'/finance/code/code', name:'FinanceCode', hidden:false, active:'/finance/code',//这里是在左侧菜单显示并且需要选中的 meta:{ title:'税收编码(金税)' }, component:()=> import('@/components/finance/code/Code'), }, { path:'/finance/code/codeimportrecord',//这个路由进入的界面是税收编码(金税)的二级页面,当进入这个页面的时候,需要菜单中的税收编码(金税)显示选中 name:'FinanceCodeImportRecord', hidden:true, meta:{ title:'税收编码导入记录' }, component:()=> import('@/components/finance/code/CodeImportRecord'), }, { path:'/finance/classcode/classcode', name:'FinanceClassCode', hidden:false, active:'/finance/classcode',//为了省事,只给需要在左侧显示的路由添加active属性 meta:{ title:'分类税收编码确认' }, component:()=> import('@/components/finance/classCode/ClassCode'), }, ] },]element
{{nav.meta.title}}