vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.88k stars 1.18k forks source link

Make warning "Discarded invalid param(s)..." optionable. #1577

Closed panruza closed 1 year ago

panruza commented 1 year ago

What problem does this feature solve?

There are use cases when route is resolving with more params than needed. There are always required params, but mostly there are other properties in params object too. Specifically, I generate table rows with links to detail, and all details paths and columns possibilities are generic by the back end. With this new warn message I have to parse each route path to get all possible params and filter my params object before resolve, which is a nonsense workaround. Why just don't ignore unnecessary params?

What does the proposed API look like?

Make this conditional with some settings.warnInvalidParams etc...

 const invalidParams = Object.keys(location.params || {}).filter(paramName => !matcher.keys.find(k => k.name === paramName));
                  if (invalidParams.length) {
                      warn(`Discarded invalid param(s) "${invalidParams.join('", "')}" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.`);
                  }
posva commented 1 year ago

This warning is actually quite important, it’s explained on the release notes. Note you’re free to ignore the warning

in general, it’s easy to pass one or two params instead of just passing a full object. There isn’t much of a win, so I think keeping the warning always is good and it’s not worth adding the complexity of a dev only setting like this

livingstonef commented 1 year ago

What about nested routes that require parent params on redirect?

Consider the following route definition:

{path: "/:group?", name: "group", children:[
     {path: "tasks", name: "tasks", children: [
          {path: ":filter/:limit?" name:"filtered-tasks-for-group"}
     ]}
]}

Why is the following now no longer accepted?

$router.push({ name: 'filtered-tasks-for-group', params: { filter: 'unread', group: 'a-team' } })

This generates a "[Vue Router warn]: Discarded invalid param(s) "group", when navigating."

Why is the 'group' param invalid when it is required?

This is even worst for routes that redirect to another route, consider the following example:

{path: "/:group?", name: "group", children:[
     {path: "tasks", name: "tasks", children: [
          {path: "next", name: "next-task", redirect: to => ({name: 'filtered-tasks-for-group', params:{filter: 'unread', limit: 1}})} 
          {path: ":filter/:limit?" name:"filtered-tasks-for-group"}
     ]},
]}

With vue-router 4.1.4 and above, the above redirect of the 'next-task' route always fails with undefined params 'group', when navigating to /a-team/timeline/next

There is no other way to resolve the filtered-tasks-for-group route withouth providing the "group" as a param.

SebiBasti commented 1 month ago

@livingstonef exactly describes my usecase. I have a parent route that handles locales so I have to give the current locale as a param to children. I'm still getting the warning.

posva commented 1 month ago

if the param does exist, it could be a bug but I would need a reproduction to check