vue路由权限控制addRoutes，按钮级别控制

vue中路由权限一般用addRoutes实现

1.新建route文件夹index.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'homePage',
      component: resolve => require(['../components/home/homePage'], resolve),
    },
  ]
})

2.新建单独的权限路由admin.js

export default[
    {
        path:'/one',
        name: 'one',
        component: resolve => require(['../components/children/one'], resolve),
    },
    {
        path:'/two',
        name: 'two',
        component: resolve => require(['../components/children/two'], resolve),
    }
]

3.homePage页面

homePage页面 
<button @click="showOne">添加one路由</button>


import adminRoute from '../../router/admin'
showOne(){      
    this.$router.addRoutes(adminRoute)
    //传入参数为数组
},

点击添加路由配置，在访问one页面

如果是需要添加子路由，将其父路由一同添加，和原本配置重复也没关系，vue路由会自动处理

homePage页面

<button @click="showOne">添加one路由</button>
<router-view></router-view>   

admin.js页面

export default[
    {
        path: '/homePage',
        name: 'homePage',
        component: resolve => require(['../components/home/homePage'], resolve),
        children:[
            {
                path:'one',
                name: 'one',
                component: resolve => require(['../components/children/one'], resolve),
            },
            {
                path:'two',
                name: 'two',
                component: resolve => require(['../components/children/two'], resolve),
            }
        ]
    },
]

注意：页面刷新的时候，实例重新创建，之前动态添加的路由也会消失，一般这样解决方法：

vuex中给一个状态，状态默认为true,设置完动态路由之后为false,刷新页面vuex会重置，当为true的时候重新执行添加动态路由的操作（可以将第一次添加的存储在session中再次获取，或者重新请求）

按钮级别的控制

按钮级别的控制使用自定义指令实现

homePage中有三个按钮只有初始化只有新增可是显示

vuex中添加state

 state: {
       btnsShow:{
        edit:false,
        add:true,
        del:false
       }
   },

创建一个自定义指令js has.js

export default{
    inserted(el,binding,VNode){
        console.log(el,binding,VNode);//可以打印查看这几个值
       let btnsShowValue =  binding.value;//获取v-has传递过来的值
       let boolean = VNode.context.$store.state.btnsShow[btnsShowValue];//拿到对应的布尔值
       !boolean && el.parentNode.removeChild(el) //为false获取其对应父级使用原生方法将其删除
    }
}

homePage页面引用自定义指令

<button v-has="'edit'">编辑</button>
<button v-has="'add'">新增</button>
<button v-has="'del'">删除</button>


import has from '../directive/has'

export default {
    name: 'homePage',
    directives:{
        has
    }
}