Navigating from router-view throws Missing required param

[phillduffy]

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 >

[posva]

Good news is the bug disappears in production because the watchers are only there for devtools

[alijuniorbr]

For those who need and are interested in fixing this problem before the new release of vue-router v4.0.6 can do the following:

in your project directory:

remove the vue-router:
npm r vue-router

install the current version (already corrected, but not published) of the vue-router:
npm i https://github.com/vuejs/vue-router-next/tarball/master

install dependencies and build vue-router:

cd node_modules\vue-router
npm i
npm run build

that's all! now your project contains these corrections that have already been committed, but are awaiting release v4.0.6

of course, don't use this build in production, because it can contain some bugs that will be prevented from v4.0.6 release

[denyncrawford]

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!

[tgel0]

For me, the error was caused by a route guard where I didn't add the required param actually. Maybe someone ends up reading this who made the same mistake as me.

[KaKi87]

Hello,

I was experiencing the very same issue when using this.$route.params and this.$router.resolve in computed properties, although I can't seem to reproduce it on JSFiddle.

My guess is, values inside params turn into undefined 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/85b0377d5bda2108926fa714b94642317c43c9f2

Thanks

[pwang2]

Can we reopen this? I don't think the has workaround works for the others suffering this especially in a migration project from vue2. :(

[villageseo]

Still actual problem in "vue-router": "4.1.6". (in development mode only)

[MatthewAry]

Still actual problem in "vue-router": "4.1.6". (in development mode only)

I 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:

• This issue presents itself in prod
• This issue affects vuetify components that create router links (See [Bug Report][3.1.14] Components built with @/composables/router can crash when routes are missing required params vuetifyjs/vuetify#17176)
• This issue does not seem to be related to any devtool code as far as I can tell

I worry that I suck at explaining thing which is why I wrote what's below

• Basically I would expect that you don't need to put all params in a RouteLocationNamedRaw object if they can be inherited by the current route.
• I don't want to have to pass in params for a router link when that particular router link appears on a route already has the param.
• The link is on a component in a child route, and the param is already defined on the parent route, so if the RouterLink on the child is for another route on the same parent, then it should inherit the param.

[Oleksii14]

@MatthewAry that is right. I am also experiencing these issues with Vuetify. The temporary solution is not to use v-btn as router link:

<v-btn :to="route" />

Change to

<v-btn @click="$router.push(route)" />

[MatthewAry]

Please see my comment on what I have learned so far. vuetifyjs/vuetify#17176 (comment)