Should we implicitly merge params?

[posva]

Coming from #2800 (comment)

Right now we are allowing implicit partial params to the location passed to router-link but this is bug-prone as the router link could be used in a different views that may not even be the parent of the location but still share the same param id and I don't think we should reuse the param in that case.

Take the following case:

const routes = [
	{ path: '/a/:id', name: 'a' },
	{ path: '/a/:id/:dynamic', name: 'a.dyn' },
	{ path: '/b/:id', name: 'b', children: [
	  { path: 'one', name: 'b.one' },
	  { path: 'two', name: 'b.two' },
      { path: ':dynamic', name: 'b.dyn' }
	  ]
	}
]

• we are on /a/2, { name: 'b.one' } will point to /b/2/one but we are sharing a param across different routes
• we are on /b/2/two, { name: 'b.one' } will point to /b/2/one
• we are on /b/2/two, { name: 'b.dyn', params: { dynamic: 'foo' } } will point to /b/2/foo, params are partially merged
• we are on /a/2, { name: 'b.dyn', params: { dynamic: 'foo' } } will point to /b/2/foo, params are partially merged across routes that are unrelated
• we are on /a/2/other, { name: 'b.dyn' } will point to /b/2/other, params are taken from a different route

This makes me wonder if it's really a good idea to implicitly merge params solely based on their name. We don't do this with query and it's very easy to pass explicitly pass params with { params: {...this.$route.params, ...otherParams} } and make it easier to guess. In any case, we won't remove current behavior but I need to trace back to where we started doing that and make sure is the right choice for future versions

The goal of this issue is to discuss about this behavior in order to decide wether to keep it for future versions or not

[newbie78]

Hi @posva!
faced a similar problem.
i18n is added to the project.
already exists routes, are as named routes, moved to children array.
as a result, I get multiple warning like: [vue-router] missing param for named route "terms": Expected "lang" to be defined (but all links is generate correctly).
is there a way to remove these warnings without adding a new props with the current language to each router-link in all components?

[posva]

See #1572 (comment)

[nicooprat]

Sorry to comment on an old issue, but I'm currently migrating to vue-router 4 and it seems this "implicit merge" behavior has been removed? I didn't find any mention of this in the migration guide: https://router.vuejs.org/guide/migration/

Example: we have a profile/:userId parent route, and its child profile/:userId/edit/:projectId; on the profile component, when creating a link to the child route, we used to only add { params: { projectId: 12 } }. An error is now thrown: Error: Missing required param "userId".

The weird part is that it seems to be thrown only when leaving the page (thus breaking the app), meaning that loading the profile page first still works fine 🤷

I'd like to be sure before updating our whole codebase according to this :) I'm not sure it's a bug or a feature, but I can open a new issue if needed.

Thanks.

[bhperry]

Facing the same issue. Links with implicit params work, but when navigating away from a page that contains links with implicit params to a page that does not use that param, it throws the "Missing required param" error and all navigation is completely broken in the app.

Very strange behavior.

[bhperry]

@nicooprat Did you ever find a solution for this?

[nicooprat]

As far as I can remember, we just added the missing params explicitely everywhere… I guess it’s safer this way, but it was a lot of work!

[bhperry]

As far as I can remember, we just added the missing params explicitely everywhere… I guess it’s safer this way, but it was a lot of work!

Yeah... I was hoping that wouldn't be the only option. Oh well, thanks!