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

阳光穿透心脏的1/2处 2021-09-03 09:52 432阅读 0赞

**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),
        }
    ]

![20201218115242282.png][]

3.homePage页面

homePage页面 
    <button @click="showOne">添加one路由</button>
    
    
    import adminRoute from '../../router/admin'
    showOne(){      
        this.$router.addRoutes(adminRoute)
        //传入参数为数组
    },

![20201218115605331.png][]

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

![20201218115635671.png][]

如果是需要添加子路由，将其父路由一同添加，和原本配置重复也没关系，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),
                }
            ]
        },
    ]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

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

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
        }
    }

![20201218135409350.png][]

[20201218115242282.png]: /images/20210813/4b4f6d023cde45fe8961ce1844b2ceb2.png
[20201218115605331.png]: /images/20210813/cf2a91adafc848f985f859822bc91b56.png
[20201218115635671.png]: /images/20210813/31d668a6a75f4401b6ea8ed6c079d789.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/9ac8cfe39a0544eaadf44b86cc524e93.png
[20201218135409350.png]: /images/20210813/be9fda1207eb4e20a2680ebe56aea444.png