vue权限指令
vue项目将后端返回的权限数据存储到vuex中，并根据不同权限展示不同内容。
directive.js
import Vue from 'vue';
Vue.directive('rule', {
//在绑定元素插入父元素生命周期触发
inserted: function (el, bind, vnode) {
//自定义指令中无法使用this获取vue实例，但是vnode绑定在实例上下文，所以使用vnode.context可以解决这个问题。
let rule = vnode.context.$store.state.rule;
//bind.vlaue获取到你使用该自定义指令绑定的值
if (!rule.includes(bind.value)) el.remove();
}
});
main.js
//单独文件中自定义全局指令必须在main.js中引用
import './utils/directive'
menu.vue
<template>
<ul>
<li v-for="(item,index) in rules" v-rule="item" :v-key="index">
{{item}}
</li>
</ul>
</template>
<script>
export default {
data: () => ({
rules: ["index", "app", "pc"]
}),
};
</script>
