Vue路由器链接传递道具未定义答案

【问题标题】：Vue router-link pass prop getting undefinedVue路由器链接传递道具未定义
【发布时间】：2021-08-21 01:29:01
【问题描述】：

这就是我传递道具的方式：

<router-link :to="{ name: 'Cart', params: { payment_method: 'cod' } }">

Router组件是这样的：

{
    path: "/cart",
    name: "Cart",
    component: Cart,
    props: true,
    meta: {
      requiresAuth: true,
    },
},

在接收路由中，Props：

  props: {
    payment_method: String,
  },

我将未定义为 payment_method 的值。这里有什么问题？

【问题讨论】：

【解决方案1】：

将您的路由器组件路径更改为：

{
    path: "/cart/:payment_method",
    name: "Cart",
    component: Cart,
    props: true,
    meta: {
      requiresAuth: true,
    },
},

【讨论】：

这确实可行，但您最终会得到多条通往购物车的路线（每种付款方式一个 + 1 个没有付款方式），这可能是不可取的。如果不是 - 选项是：(1) 使用状态管理来保存选择的支付方式并在购物车组件中读取它或 (2) 使用 query 而不是 params，但这个 url 最终会是.../cart?payment_method=cod.
谷歌搜索后尝试了这个。仍然“未定义”！控制台中出现此警告“[vue-router] 缺少命名路由“Cart”的参数：应定义“payment_method””
我没有使用过路由“元”属性，但我会尝试注释掉您的元属性，看看它是否有效。如果是这样，则从那里进行故障排除。

【解决方案2】：

尝试在props:true的路由中设置payment_method为slug，并在vue实例的数据中直接捕获路由的prop

<router-link :to="{ name: 'Cart', params: { payment_method: 'cod' } }">

{
    path: "/cart/:payment_method",
    name: "Cart",
    component: Cart,
    props: true,
    meta: {
      requiresAuth: true,
    },
},

直接在数据中捕获

data: function () {
    return {  
      payment_method: this.$route.params.payment_method, 
    };
  },

这将解决您的问题

【讨论】：