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

Posted 2023-02-23

【中文标题】VueJS3：从路由定义中传递数据

【英文标题】：VueJS3: Passing data from route definition

【发布时间】：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

【参考方案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