vue 动态路由判断权限加载不同路由的方法。

看了好多动态路由的方法看到头晕，最后还是自己搞了个方法解决。

使用

• addRouter
• 本地存储
• 路由钩子

思路

router/index.js

• 在登录验证通过后，获取权限通过不同权限挂载不同权限的路由。

路由处理

这两个为动态追加的路由路径
// 平台路由
import platform from './0'
//运营路由
import management from './1'

正常的路由路劲
Vue.use(Router)
const router = new Router({
mode: 'hash',
routes:[
  {
    path: '/',
    name: '/',
    component: Login,
  },
//......写固定路由
过滤空路由
{
      path:"*",
      component:Login,
 }
]
})

只加载一次的 上锁
let off = true;
// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
// 动态添加路由
if(off){
  let routers = []
//这里为读取本地的权限 测试里面只有0，1两个权限
  switch (window.sessionStorage.getItem('jurisdiction')) {
    case "0":
      routers = platform
      break;
    case "1":
      routers = management
      break;
    default:
      break;
  }
  router.addRoutes(routers)
//锁住
  off = false
}
}）

被上面导入的路径代码如下

0.js || 1.js

//设置
const Setup = () => import('@/pages/setup/0/Setup.vue')
export default [
   //首页
   {
       path: '/index',
       name: 'Index',
       component: Index,
       meta: { requiresAuth: true },
   },
 ......
]

搞完这些后发现一个问题，不会加载，需要刷新页面才会出现。当时想了好多原因，不想了直接用了一个蠢办法，登陆成功后刷新一次

 // 登陆
        login (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {    
                    this.$store.dispatch('toLogin', {
                    loginUser: this.ruleForm.username,
                    loginPassword: this.ruleForm.password
                }).then(() => {
                    this.$router.go(0) //登陆成功后刷新一次再去获取信息
                    this.$store.dispatch('getUser')
                   ......

以下为超纲部分

这样又出了一个问题，刷新后加载出来的页面导航条第一个不会选中。默认进入第一个导航条不选中有点烦。查看数据发现已经挂载了需要触发一次点击事件。然后发现貌似强制触发事件也不行。最后灵机一动写了个自定义指令。
在页面挂载之前

<el-menu 
:default-active="activeIndex" 
background-color="transparent" 
@select="handleSelect"
> 

 <el-menu-item 
@click="routerGo(item[1])" 
:key="item[1].index" 
v-acti="item[1].index"  //自定义指令
v-for="(item,index) in showEnd" 
:index="item[1].index"
>
</el-menu-item>
</el-menu>

 directives:{
    'acti':{
       bind(el, binding,vnode){
        if(binding.value == 0 && window.sessionStorage.getItem('activeIndex') == null){
                    el.click()
                    return
        }                
        if(window.sessionStorage.getItem('activeIndex') == binding.value){
                    el.click()
        }
     }
   }
 },
data(){
  return {
    //最终挂载的路径
       showEnd:null,

       jurisdiction:'',
        //默认点击的值
        activeIndex:"0",
  }
},
    methods: {
        handleSelect(key, keyPath) {
            window.sessionStorage.setItem('activeIndex',key)            
        },
        // 切页面
        routerGo(item){
            this.$router.push(item.path)
        }
    },
如果页面初始存个点击项感觉这里可以不用。毕竟初始只用第一个
    created() {
        if(null == window.sessionStorage.getItem('activeIndex')){
            window.sessionStorage.setItem('activeIndex',this.activeIndex);
        }
    },
//加载不同的导航条
    mounted() {
        this.jurisdiction = window.sessionStorage.getItem('jurisdiction');
        let that = this
        switch (this.jurisdiction) {
            case "0":
                that.showEnd = that.showList1
                break;
            case "1":
                that.showEnd = that.showList2
                break;
        }  
    },
//监控路由跳转跳转让该页面的导航条处于激活状态
    watch: {
        $route(to,from){
            let path = "/"+(to.path.split("/")[1])
            this.showEnd.map(item => {
                if(item[1].path == path){
                    this.activeIndex = item[1].index
                }
            })
        }
    },