Vue-router: [DOCS] Clearer usage of prop functions with named views

[tesla3327]

What problem does this feature solve?

I spent a few hours this morning trying to get prop functions with named views to work.

At first I thought that props itself was supposed to be a function that returned an object for all named views:

const routes = [
  {
    path: '/organizations/:id/insights/:widget',
    components: {
      default: SeeMore,
      filter: Filter,
      actionBar: ActionBarBack,
    },
    props: route => ({
      actionBar: {  
        name: route.params.widget,
      },
      filter: {
        hideAutocomplete: true,
      }
    }),
  },
]

After reading and stepping through the vue-router code, I eventually figured out the correct implementation is:

const routes = [
  {
    path: '/organizations/:id/insights/:widget',
    components: {
      default: SeeMore,
      filter: Filter,
      actionBar: ActionBarBack,
    },
    props: {
      actionBar: route => ({  
        name: route.params.widget,
      }),
      filter: {
        hideAutocomplete: true,
      }
    },
  },
]

The docs are not very clear (at least to me) that this is the correct implementation. Not sure if others have had this problem, or if it's just me 🤷‍♂️

What does the proposed API look like?

My suggestion is to add a section to Passing Props to Route Components that explains how to use this with Named Views, along with an example.

Could also add a link to this section in the Named Views section of the docs.

[posva]

This is indeed missing in docs. It should go into https://router.vuejs.org/guide/essentials/passing-props.html if anyone wants to make a contribution
And, as you said, a little note to it in the Named Views section would also be nice.

[suprabhasupi]

@posva I would like to pick this up

[posva]

go ahead

[suprabhasupi]

go ahead

Thanks @posva!
I have created a PR for the this issue.
I have tried to be as simple and direct as possible(As this is my first contribution I might be missing some information to add), Please have a look and let me know if there is any changes required. 🙂

[y-nk]

I wished that this PR was merged sooner. Hopefully this ticket was easy to find.

[mikeher]

I also just spent an extraordinary amount of time trying to find a solution until I stumbled upon this ancient issue. Thank you for your efforts, this solved my problem.

[douglasg14b]

I just spent a large amount of time trying to figure this out.... The docs really did not provide the necessary information here, this should be explicitly exampled in it's own section on named views.

Thank you for this.

[douglasg14b]

Another patterns that is not immediately obvious is:

{
  path: '/settings',
  component: UserSettings,
  props: (route) => resolveProps(route),
  children: [{
    path: 'profile',
    props: { // Important bit here
        default: (route) => resolveProps(route),
        helper: (route) => resolveProps(route)
    }.
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

If the childs props is a simple function (ie props: (route) => resolveProps(route)) it silently fails, and is never called. Which can lead to a lot of unnecessary confusion.