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

【问题标题】：Pass props to a route without needing URL params在不需要 URL 参数的情况下将 props 传递给路由
【发布时间】：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”添加到默认子路由来实现的。

【问题讨论】：

标签： vue.js vuejs2 parameters vue-router

【解决方案1】：

您可以执行以下操作：

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

在你的组件中定义prop：

props: ["someValue"]

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

【讨论】：

谢谢，我也试试看！