一、项目背景
本系统的权限是由前端页面写入的各路由页面，分配给各角色。然后再根据后端返回的页面数据去做路由权限，每个页面都有按钮的权限，按钮也是前端页面去规定的字段。
graph TD
一级中心/Center --> 二级模块/Manage --> 三级页面/Page --> 按钮权限/Button
二、指令实现
main.js文件
// 按钮权限指令
app.directive('auth', { //在标签内使用v-auth即可调用改指令
mounted(el, binding) { //el是绑定改指令的dom; binding是一个对象，这里用来获取绑定的值
let userBtns = ["userInfo/edit", "management/add"] //这一步假设是获取的按钮权限数据
!userBtns.includes(binding.value) && el.remove(el) //如果指令不存在权限当中，移除当前元素，即可实现按钮隐藏
}
})
页面文件
<div v-auth="route.name + '/edit'">编辑</div>
假如该路由的name为home,在这里获取到的binding.value为"home/edit"，如果所获取的权限按钮数组内不存在该值，即会移除该元素。
三、总结
其实指令实现很简单，这里主要是根据管理页面所设定的路由页面各个按钮的key去实现权限，那如何区分各页面的编辑和删除等高度重复的按钮呢。这里就用到了路由页面的唯一的name去拼接，也能够规范该指令的绑定值。
关于指令参数，[vue文档](自定义指令 | Vue.js (vuejs.org))写得很详细了，就不再赘述
