vuejs / router

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

Error: Missing required param #2229

Closed markusheiden closed 1 month ago

markusheiden commented 2 months ago

Reproduction

https://jsfiddle.net/w61ngh4b/26/

Steps to reproduce the bug

When navigating from a route with params (the current route) to one without params (the target route) sharing a common path prefix, in some constellations when computing activeRecordIndex.value in the ComputeRef isExactActive fails. That resolves route.value what fails at the end on return router.resolve(to), because to is the current route without params. That results in an error Missing required param "..." because that route requires params and will be matcher.stringify'ed at some point.

The part I don't understand is how the current route makes it into useLink(props) as props.to, because the debugger fails me at that point.

The whole callstack bottom-up without reactivity:

Though I tried in the reproduction link, I failed to reproduce the issue. But I have a browser.log from our app that reliably throws that error.

Expected behavior

No errors. The params of the current route should be available in that logic, or the logic shouldn't be called at all.

Actual behavior

Error: Missing required param "..."

Additional information

    "vue": "3.4.26",
    "vue-router": "4.3.2",
    "vuetify": "3.6.3",
    ...
skirtles-code commented 2 months ago

While it could be a bug in Vue Router, it could also be a bug in Vue core or your application code. I've looked through the details you've provided, but I don't think it's going to be possible to fix this without a reproduction.

markusheiden commented 1 month ago

Thanks for caring! It was a bug in our breadcrumb implementation, so I will close this issue. Sorry for that.