router: Navigating from router-view throws Missing required param
Version
4.0.5
Reproduction link
https://github.com/phillduffy/route-issue
Steps to reproduce
- Run the repo
- Navigate to ‘Child with Param’
- Click ‘Back Home’
What is expected?
User should navigate back to the home page
What is actually happening?
Exception is being thrown
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of watcher callback at <RouterLink to= {name: "grandchild"} > at <Child onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > at <RouterView> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > at <RouterView> at <App>
and
Uncaught (in promise) Error: Missing required param "id" at Object.stringify (vue-router.esm-bundler.js:994) at Object.resolve (vue-router.esm-bundler.js:1410) at Object.resolve (vue-router.esm-bundler.js:2860) at vue-router.esm-bundler.js:2039 at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42) at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:828) at vue-router.esm-bundler.js:2041 at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:42) at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:828) at vue-router.esm-bundler.js:2064
Updating the grandchild link to the following gets around the issue
<router-link :to="{ name: 'grandchild', params: { id: 1 } }" >Grandchild</router-link >
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 1
- Comments: 21 (1 by maintainers)
Commits related to this issue
- Make repository id optional due to vue-router bug - See https://github.com/vuejs/router/issues/845 — committed to tailor-cms/author by underscope 4 months ago
Still actual problem in “vue-router”: “4.1.6”. (in development mode only)
Still actual problem in “vue-router”: “4.1.6”. (in development mode only)
Hmm, its interesting that it happens so many different ways tbh. I also feel like this is just getting completely ignored though by the router devs due to the labeled workaround, but its clearly still occuring. We are mainly noticing it when we are having users hit the back button. Have tried switching things from being computed properties, tried using postFlush, upgraded the router, but continues to occur. No way to actually make a replication of how we use our app but its a very large app and uses alot of dynamic params that are passed around.
Can we reopen this? I don’t think the
has workaround
works for the others suffering this especially in a migration project from vue2. 😦Hello,
I was experiencing the very same issue when using
this.$route.params
andthis.$router.resolve
incomputed
properties, although I can’t seem to reproduce it on JSFiddle.My guess is, values inside
params
turn intoundefined
between the time when the navigation starts and the time when the component is unmounted.Because, checking that the
params
object wasn’t empty is the only small fix I needed to prevent the error from being thrown : https://git.kaki87.net/KaKi87/scraper-instagram-gui/commit/85b0377d5bda2108926fa714b94642317c43c9f2Thanks
Please see my comment on what I have learned so far. https://github.com/vuetifyjs/vuetify/issues/17176#issuecomment-1517843304
Good news is the bug disappears in production because the watchers are only there for devtools
My five cents:
I had the same error,
Error: Missing required param "id"
, when navigating back to the “top level route” from a second level subpage. This was happening in one project, but not in the other.Example navigation:
Home/index page (OK) → Some mid-level page (OK) → Second level page (OK) → Back to index (error)
In the erroneous project, I had “top-level dynamic routes”, whereas in the working one, each “top level path” was prefixed with something before entering dynamic routes.
Perhaps not a feasible solution, but at least it got rid of the error for now.
Example, not working:
And working version:
I suppose I could make the param optional as well, as so (and have an in-component check instead for its existence):
Looking at the docs, I see no code samples with “top-level dynamic names”, so maybe not supported. So implementation of navigation failure guards is probably the best way to go 😉
https://router.vuejs.org/guide/advanced/navigation-failures.html#Global-navigation-failures
And in the original sample code, as the “subroute” is prefixed with a beginning
/
, it becomes a top-level dynamic route? https://github.com/phillduffy/route-issue/blob/main/src/routes.js#L10I agree. I have been able to reproduce this issue with
RouterLink
but I have not been able to create a sharable reproduction, and it’s not been without trying! I can get this issue to show up in my internal app but when I try to recreate the same conditions in a simplified reproduction I can’t get the error to present. My learnings so far:I worry that I suck at explaining thing which is why I wrote what’s below
RouteLocationNamedRaw
object if they can be inherited by the current route.Hi, @alijuniorbr, having same issue here:
I have vue-router@4.0.12 installed and this is my router link (1st one):
Fun fact: link bellow works normally
By logging the params from
beforeEach
(to.params) this is what I get:So it is there actually…
Please can I get some help? Thanks!