I want to pass a props via the vue router with the router link looks like this

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

And this is my routes

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

I have set the props to true and also add the params to the path /:productId. I also follow the example from this link

I'm trying to pass that props to my ponent, but when I want to use that props in my ponent, the props always undefined. Here's my ponent

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

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

I did exactly like the example, the example run perfect without any issue, but mine didn't. How do I solve this?

Thank you

I want to pass a props via the vue router with the router link looks like this

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

And this is my routes

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

I have set the props to true and also add the params to the path /:productId. I also follow the example from this link https://codesandbox.io/s/o41j762pnz

I'm trying to pass that props to my ponent, but when I want to use that props in my ponent, the props always undefined. Here's my ponent

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

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

I did exactly like the example, the example run perfect without any issue, but mine didn't. How do I solve this?

Thank you

• javascript
• vue.js
• vue-router

• 1 Can you show us your CodeSandbox where it does not work? – IVO GELOV Commented Jun 29, 2021 at 16:30
• @IVOGELOV I'm sorry for the long wait, here's the link codesandbox.io/s/unruffled-galileo-0m959?file=/src/main.js please ignore the messed html, because I didn't load the css, if you look at the console, it shows undefined – Villian Commented Jun 30, 2021 at 1:40
• 2 For routes with named views, you need to define props for each individual view you want to pass the param into: router.vuejs/guide/essentials/… – Terry Commented Jun 30, 2021 at 5:19
• @Terry I did what you say, it still the same undefined, i did something like this { path: '/product/details', name: 'product-details', props: { productId: Number }, ponents: { navbar: Navbar, default: ProductDetail, footer: Footer }, }, – Villian Commented Jun 30, 2021 at 6:20
• @Villian You're doing it incorrectly. Refer to my answer. – Terry Commented Jun 30, 2021 at 6:33

1 Answer 1

As you are using named views in your router, you cannot just declare prop: true. You will have to declare that explicitly on each view that you want to receive the parameter. This can be done by changing how prop is defined. This is how you're doing it now, which will not work:

props: true

The correct way:

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

So your routes should look like this:

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