技術標籤：vue

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頁面

按鈕級別的控制

按鈕級別的控制使用自定義指令實現

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