无需 URL 参数即可将道具传递给路线

Question

我想将数据传递到路由而不需要在路径中定义参数。我已经能够通过使用查询参数来完成传递数据，但我不想在 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，我也放下了道具（显然console.log是在一个生命周期内钩子):

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”以允许任何参数通过？我不太确定，尤其是因为它在控制台中返回“未定义”。

任何帮助将不胜感激，提前致谢！

更新当我将路径：'/checkout' 更改为名称：'checkout' 并在路由中指定名称时它起作用，但这不是最佳选择，因为它返回有关默认子路由的警告。

第二次更新 我想我通过将名称 'checkout' 添加到默认子路由来使其工作。

Answer 1

您可以像下面这样：

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

在你的组件中定义道具：

props: ["someValue"]

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

无需 URL 参数即可将道具传递给路线

Pass props to a route without needing URL params

parameters

vue.js

vue-router

vuejs2