Vue 按钮级别权限控制

     path: 'team/new',
        name: '新增车队',
        component: () => import('./eduAdministration/TeamForm'),
        meta: {

          permissions: ['team/new'],
          title: '新增车队',
          icon: '',
          scrollToTop: true
        },
        hidden: true
      },
      {
        path: 'team/:id/edit',
        name: '编辑车队',
        component: () => import('./eduAdministration/TeamForm'),
        meta: {
          permissions: ['team/edit'],
          title: '编辑车队',
          icon: '',
          scrollToTop: true
        },
        hidden: true
      },

在 meta 里添加权限

新建文件控制权限信息

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    // 获取按钮权限
    let Permissions = vnode.context.$route.meta.Permissions.split(",");
    if (!Vue.prototype.$_has(Permissions)) {
      el.parentNode.removeChild(el);
    }
  }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  let PermissionsStr = sessionStorage.getItem("Permissions");
  if (PermissionsStr == undefined || PermissionsStr == null) {
    return false;
  }
  if (value.indexOf(PermissionsStr) > -1) {
    isExist = true;
  }
  return isExist;
};
export {has}

然后在main.js中引入