首先創(chuàng)建一個 btnPermissions.js 文件夾(路由里面存放了該頁面擁有的按鈕權限)

import Vue from 'vue'
/**權限指令**/
const has = Vue.directive('has', {
 bind: function (el, binding, vnode) {
  // 獲取頁面路由按鈕權限
  let btnPermissions = vnode.context.$route.meta.permissionValues;
  // 進入循環(huán)判斷是否顯示該節(jié)點
  if (!Vue.prototype.$_has(btnPermissions,binding.value)) {
//    el.parentNode.removeChild(el);
       el.style.display = "none";
  }
 }
});
// 權限檢查方法 value：按鈕的值 btnPermissions： 路由含有的按鈕權限 
Vue.prototype.$_has = function (btnPermissions,value) {
 let isExist = false;
 // 判斷當前用戶該頁面是否含有權限按鈕
 if (btnPermissions == undefined || btnPermissions == null) {
  return false;
 }
 // 判斷該用戶該頁面的權限按鈕是否顯示
 if (btnPermissions.indexOf(value) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

路由配置

在main.js 全局調(diào)用

import has from './plugins/btnPermissions' // 權限按鈕字段判斷

在頁面使用

<Button icon="md-add" type="primary" style="margin-left: 10px" v-has="user.add" @click="add">添加</Button>

export default {
  data() {
    return {
      user:{
        add: "user.add"
      }, // 權限按鈕
  }
}