Passing router value as prop

Question

I'm passing the data as

route

{
    path: '/name/:nameSlug',
    name: 'NameItem',
    props: true,
    components: { home: Name }
},

router link to component

<router-link :to="{ name: 'NameItem', params: { nameSlug: name.nameSlug } }">
  {{ name.english }} 
</router-link>
 // name object
{
  "id": 1303,
  "english": "bob",
  "gender": "M",
  "nameSlug": "bob"
}

NameItem props

props: {
    nameSlug: {
        type: String,
        required: true
    }
},

I'm getting the following error for this page, what is the issue? using "vue-router": "^3.2.0":

TypeError: Cannot read property 'nameSlug' of undefined

or this, note the url does change correctly

[Vue warn]: Missing required prop: "nameSlug"

Looks more like the issue is with name.nameSlug than anything to do with the router or props. What does name object look like? — Beyers
@raklos that doesn't answer my question at all. When you see that error (presumably in your browser console), it will include a file and line number. You can even click through to it to see the source. What does that line of code look like? — Phil
@Phil I have updated, similar issue here, but not sure if if he got it working forum.vuejs.org/t/vue-router-2-2-0-not-seeing-params-in-props/… — raklos

Phil Phil · Accepted Answer · 2021-03-31T23:34:16

See this note in the documentation...

for routes with named views, you have to define the props option for each named view

Your route uses the named view "home" so you will need something like the following

{
  path: '/name/:nameSlug',
  name: 'NameItem',
  props: {
    default: true,
    home: true
  },
  components: { home: Name }
},

Passing router value as prop

1 Answers