vue 自定义指令控制元素加载到页面中

Question

代码写了一半，不知如何往下进行，想实现的效果是像v-if那样，如果不满足，页面根本不加载该元素，而不是控制元素的display.
代码如下：
`

// main.js注册一个全局自定义指令 “v-permission”
Vue.directive(“permission”,  function (el,binding) {
    let btnAuth = JSON.parse(sessionStorage.getItem(“btnAuth”))
    let index = btnAuth.findIndex(item => {
        return item.path === binding.arg
    })
    return index > -1 ? true :false
    //true:加载该元素；false：不加载该元素
})
//页面模板
<router-link :to="{name:'shop.goods.index.add'}" v-permission:shopGoodsIndexAdd>
    <el-button type="primary">
        添加商品
      </el-button>
</router-link>

`

Answer 1

思路
v-if是动态的向DOM树内添加或者删除DOM元素
如果不满足那么找到该元素的父级然后删除元素 removeChild
如果满足那么创建元素 createElement 以及后面对元素的渲染问题