How to pass props to named views through <router-link /> in vuejs?

问题

I’m new to VueJS and front end development. I’m looking to pass a props (in this case, my club’s id) to my component/view.

It was initially working with <router-link :to="{ name: 'club', params: {id: club.id } }">. My component call a props “id”, and my view, named club has the parameter props:true;

Fast forward a little later, i had to add named view. (I only added one for now - but i’ll have a view content and one nav).

mode: 'history',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'is-active',
  routes: [
    {
      path: '/',
      name: 'clubs',
      components: {
        content: Clubs
      }
    },
    {
      path: '/club/:id',
      name: 'club',
      props: true,
      components: {
        content: Club
      }
    }
  ]
})

And this broke everything. In the Vue extension, i can see that my send is sending my props as a param (see attachement 1), but once on the view, the id is undefined (see attachment 2).

Am i missing anything?

Attachement 1

Attachement 2

回答1:

You'd need to set a props value for each named view in that case. e.g.

components: {
  content: Club
},
props: {
  content: true
}

I can't find a decent explanation of this in the documentation but it does feature in an example here:

https://router.vuejs.org/guide/essentials/passing-props.html

Note the following comment lurking in the code example:

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

来源：https://stackoverflow.com/questions/57807262/how-to-pass-props-to-named-views-through-router-link-in-vuejs