VueJS3：从路由定义中传递数据

【问题标题】：VueJS3: Passing data from route definitionVueJS3：从路由定义中传递数据
【发布时间】：2021-03-02 12:23:07
【问题描述】：

使用 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) {

            }
        })
    },
}

因为它不起作用。有没有可能？

【问题讨论】：

router.vuejs.org/guide/advanced/meta.html

标签： vue.js vue-component vue-router vuejs3

【解决方案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

【讨论】：