New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Navigating from router-view throws Missing required param #845
Comments
Good news is the bug disappears in production because the watchers are only there for devtools |
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: install the current version (already corrected, but not published) of the vue-router: install dependencies and build vue-router:
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 |
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 So it is there actually... Please can I get some help? Thanks! |
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. |
Hello, I was experiencing the very same issue when using My guess is, values inside Because, checking that the Thanks |
Can we reopen this? I don't think the |
Still actual problem in "vue-router": "4.1.6". (in development mode only) |
I agree. I have been able to reproduce this issue with
I worry that I suck at explaining thing which is why I wrote what's below
|
@MatthewAry that is right. I am also experiencing these issues with Vuetify. The temporary solution is not to use
Change to
|
Please see my comment on what I have learned so far. vuetifyjs/vuetify#17176 (comment) |
My five cents: I had the same error, Example navigation: 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: routes: [
{
path: '/',
name: 'Page0',
component: () => import('../views/Page0.vue'),
children: [
{
name: 'HomeSubpage',
path: ':homedynamic',
component: () => import('../views/HomeSubpage.vue'),
},
],
},
{
path: '/:dynamic', // Issue here 🚨
name: 'Page1',
component: () => import('../views/Page1.vue'),
children: [
{
path: ':subpage',
name: 'Page2',
component: () => import('../views/Page2.vue'),
},
],
}, And working version: routes: [
{
path: '/',
name: 'Page0',
component: () => import('../views/Page0.vue'),
children: [
{
name: 'HomeSubpage',
path: ':dynamic',
component: () => import('../views/HomeSubpage.vue'),
},
],
},
{
path: '/expenses', // Working when not a param ✅
name: 'Page1',
component: () => import('../views/Page1.vue'),
children: [
{
path: ':subpage',
name: 'Page2',
component: () => import('../views/Page2.vue'),
},
],
}, 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 |
Hmm, I also just noticed that if I use So the following fails: <router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view> And this works: <router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view> I don't know, seems like it's trying to navigate backwards in history maybe? Just guessing. |
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. |
Still actual problem in "vue-router": "4.1.6". (in development mode only) |
Still having the same issue in vue-router 4.1.6
Any workaround here? |
Having the same issue using vue-router@4.2.5. I can solve it making all dynamic params optional but a more stable solution would be preferred. |
Having same issue in vue-router 4.0.0. |
Having same issue in vue-router 4.2.5, when using with vuetify navigation drawer |
Idk if the following code can help you, but try it. I read adding the optional symbol (?) on declartion path solve this problem. Example
Greetings. |
Same issue in latest version of Nuxt |
hi, is there any fix for this? major bug with my nuxt app |
Version
4.0.5
Reproduction link
https://github.com/phillduffy/route-issue
Steps to reproduce
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 >
The text was updated successfully, but these errors were encountered: