Router Params not being propagated to route

[paulushcgcj]

Reproduction

https://play.vuejs.org/#eNqFVW1v2zYQ/is3tZgczJactOgHzRHSDcWyoduydhgwTAMqS7TNRCI5kkocaPrvO/JkSXazFIZh8l6fu+eOboM65yK6NUES8FpJbaGFQrPcsrdKQQcbLWsI7xsWZqI30LKxTPeaKKbrqHZ+B12uVES+mRiizvB7lgmAqDFsRu50r2Uj7Cx8gW7hWTAPenfEtrKsVhX6p85wJfJ7f8DjB+//nos7sPIyC+IsSH+QeIZrWbNVPOpT+Fqsjfr2c8fEe7Yg8polodJywysWzkHlOq9N0kJttkn4nhvLBNxxEUI3h38aph+Tlnz+bG552EGHyW/I/SizBx0fUK9cz4/x/8HZA8S9Xa9exUPR2Avq05NM/cxqqR+vER7+zHshxZ0yuBiYQjKkMD2TBi7hL5e4BYLkK4Jwh+0L5yRSud2hKD7cC4kIBBM2gdkZXKZAiGZIueu6q8bzfuZDdt7rJPzQ5eMMJ+JnEr1dI/ox0yGOlsokVJmznxF58OmaVZWkZlAfvoKXrT9FnsnI4erg30FK5Efo3X2CjuK7Sv4+6Z/G/k1bPmud5Y7YSJ6iaEbBqPt47HD6M8H2ntSSbfKmOsRG4qcNdZtgCs2VBcNso6DKxRZH1xocPDcxpMQjXo5XZneRHiKtYrycztdRO7+QBzFywXDQlaFqfYs/Ws3Flsp5Fsl52npWoOsQynkKfjJWKoUbWjhA/ctTFry1ohBo+ptfv4nlyOJgeVwhjc6izhVukRRYo8ee9QosDcPRFGXBuC9OnAU7a3Gu4rgR6m4b4VjGo8XV6+hVtIxLZHcijZipF2stH4xf2yzoJzQLrtAoLtm9lbIyi1zx/0vxmeHVm+hNdB5XfB1j9JgjE3sf2w8nth7LtAaHc8O3J0W6TcLF0r8qy3F4j4rNcTUefvIyqxs2AC12rLh7Qn5r9gT5RjOs7p5NirO53jJL6ncff2F7PA/KWpZNhdbPKD8wI6vGYSSz7xpRIuyJnUf7o+cM5+13826Pz7I5FOWAjo+OJ/L7Z0of4b6KXk+6aOxjxUxUGPfe4sM9B/cqk99a6pLpBC7UHhAsL+HFcrn0/ys1huNisZbWyjqB86Xae7nKyxLBDhLMkgkMCynk8A1+aY3Iu2IbfO+mlruLaeYx/AigKIoJgASW+LnoIwTdf+Pvpmk=

Steps to reproduce the bug

Through the use of a Routerlink such as <RouterLink :to="{ name:'profile', params:{ msg:'Listen kin' }, query:{name:'Yuji'} }">Profile</RouterLink> or through the use of router.push({ name:'profile', params:{ msg:'Listen kin' }, query:{name:'Yuji'} }) the content of params is being ignored when it should be passed to the component as props.

The repository contains a folder called frontend with a project initialized using Vite with the addition of the Vue router only. It is set in a way to replicate the same structure present in my work project where we are facing the same issue.

App.vue contains 3 RouterLink entries, and I tried to set the profile route with props: true but it didn't work, so I switched to the function hoping that it would work but the same happened.

The pages/ProfileView.vue file is just a simple example showing not only the contents of the prop but also the content of both query string and route params.

Expected behavior

The params must be populated when reaching the component and filling the props

Actual behavior

An empty object is being propagated as the params, thus setting empty values on the props

Additional information

No response

[posva]

You have a warning in the console explaining it:

[Vue Router warn]: Discarded invalid param(s) "msg" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.

https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22

[paulushcgcj]

The documentation doesn't describe this either as anti-pattern and it is not clear that this should not work.

I can understand the decision but completely removing the params from the route seems like a worst and forced solution. The fact that the data can be lost when the page is refreshed can be mentioned as part of the documentation so the user can decide if this is worth using or not.