vue3如何在自定义组件内获取路由?vnode.context.$route类似这样？

Question

Vue.directive('allow', {
 inserted: (el, binding, vnode) => {
 let permissionList = vnode.context.$route.meta.permission;
 if (!permissionList.includes(binding.value)) {
 el.parentNode.removeChild(el)
 }
 }
})

Answer 1

暴露router单独引入使用

Answer 2

一般来说都会把路由表存到 Vuex 或者 Pinia 当中，然后去读取对应的 state。

比如说 Ruoyi-ui-Vue3 的 hasPermi.js
以及 jeecgboot-vue3 的 permission.ts

当然也可以通过 useRouter 来获取 vue-router 实例。#useRouter - API 参考 | Vue Router

Answer 3

一般是在setup里面调用useRoute获取啊.其他的函数运行时获取不到.
vnode的话是在加载之后的可以用ref去绑定.
监听一下就好了.

Answer 4

使用这个binding.instance.$router.currentRoute.value.meta.permission，亲测有效