在不需要 URL 参数的情况下将 props 传递给路由

Posted 2023-02-22

【中文标题】在不需要 URL 参数的情况下将 props 传递给路由

【英文标题】：Pass props to a route without needing URL params

【发布时间】：2021-09-10 21:59:57

【问题描述】：

我想将数据传递给路由，而不需要在路径中定义参数。我已经能够通过使用查询参数来完成传递数据，但我宁愿不在 URL 中显示参数。

据我在互联网和 Vue-Router 的文档中找到的，这是可能的，但我不是 100% 确定如何实现这一点。因此，我很乐意得到一些帮助。

给你一个简单的想法，这是我正在使用的代码：

Cart.vue，我要推送路由器的文件：

this.$router.push( path: '/checkout', params: nextUrl: this.$route.fullPath, pid: this.$route.query.pid, quantity: this.quantity ).catch(() => );

Checkout.vue，这里我想检索参数，现在我只是使用console.log，我也放下了props（显然console.logs在一个生命周期钩子里）：

props : ['pid', 'quantity']

console.log(this.$route.params.pid);
console.log(this.$route.params.quantity);

最后，这是我的路线：

    path: '/checkout',
    component: Checkout,
    children: [
        
        // path: '',
        //     component: Personal,
        // , later afrekenen als gast toevoegen               
            path: '',
            component: Address,
        ,
        
            path: '/checkout/payment',
            component: Payment,
        ,                
        
            path: '/checkout/confirm',
            component: OrderCheck,
        
    ],
    meta: 
        requiresAuth: true,
    ,
    props: true
,

根据我的阅读，您可以简单地添加“props：true”以允许任何参数通过？我不太确定，特别是因为它在控制台中返回“未定义”。

任何帮助将不胜感激，在此先感谢！

更新 当我将 path: '/checkout' 更改为 name: 'checkout' 并在路由中指定名称时，它可以工作，但这不是非常理想，因为它返回有关默认子路由的警告。

第二次更新 我想我是通过将名称“checkout”添加到默认子路由来实现的。

【参考方案1】：

您可以执行以下操作：

<router-view :some-value="value"/>

在你的组件中定义prop：

props: ["someValue"]

请注意，道具正在传递给所有路由组件，（但只要您不定义道具，就无法访​​问）。

【讨论】：

谢谢，我也试试看！