Vue 路由器传递道具是未定义的

Question

我想通过 vue router 和 router 传递一个 props link 看起来像这样

<router-link :to="{ name: 'product-details', params: { productId: 123 } }" class="product-sbb d-block">

这是我的路线

{
  path: '/product/details/:productId',
  name: 'product-details',
  props: true,
  components: {
   navbar: Navbar,
   default: ProductDetail,
   footer: Footer
 },
},

我已将 props 设置为 true，并将参数添加到路径 /:productId。我也按照这个例子 link https://codesandbox.io/s/o41j762pnz

我正在尝试将该道具传递给我的组件，但是当我想在我的组件中使用该道具时，道具总是 未定义。这是我的组件

import ProductDetail from '../components/parts/ProductDetailGallery.vue';

export default {
  props: {
    productId: Number
  },
  data() {
  },
  created() {
    console.log(this.productId)
  }
}

我做的和这个例子一模一样，这个例子运行完美，没有任何问题，但我的没有。我该如何解决？

谢谢

Answer 1

当您使用 named views in your router 时，您不能只声明 prop: true。您必须在每个要接收参数的视图上明确声明。这可以通过更改 prop 的定义方式来完成。这就是您现在的做法，不会起作用：

props: true

正确的做法：

props: {
    // You must set `true` to the default view, which uses ProductDetail
    default: true
}

所以你的路线应该是这样的：

const routes = [
  {
    path: "/product/details/:productId",
    name: "product-details",
    components: {
      navbar: Navbar,
      default: ProductDetail,
      footer: Footer
    },
    props: {
      // You must set `true` to the default view, which uses ProductDetail
      default: true
    }
  }
];

Vue 路由器传递道具是未定义的

Vue router passing props is undefined

javascript

vue.js

vue-router