VueJS3:从路由定义传递数据

Question

使用Vue3。我希望在路由定义中设置允许的角色，然后在beforeRouteEnter中使用该值。类似于：

{
    path: "secure/page",
    name: "SecurePage",
    component: SecurePage,
    params: {role: admin},
}

然后

const guard = {
    template: `...`,
    beforeRouteEnter (to, from, next) {
        next(vm => {
            if( 'admin' === vm.$route.params.role) {

            }
        })
    },
}

因为它不管用。有可能吗？

Answer 1

在尝试时，不能从视图访问路由器params定义。你需要这样的东西：

{
    path: "secure/page",
    name: "SecurePage",
    component: SecurePage,
    meta: { role: 'admin' }
}

然后在视图中，而不是在vm.$route.params.role中使用vm.$route.meta.role

beforeRouteEnter(to, from, next) {
    next(vm => {
        if ('admin' === vm.$route.meta.role) {

        }
    })
}

正如您所知道的，beforeRouteEnter保护不允许而不是访问这一点，因为这个保护在导航确认之前就被调用了，因此新的进入组件甚至还没有创建。

更多关于元字段的信息，您可以在这里找到：https://router.vuejs.org/guide/advanced/meta.html