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)

[postmodernistx]

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:

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

path: '/:dynamic?',

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#L10

[postmodernistx]

Hmm, I also just noticed that if I use <keep-alive> inside the <router-view>, it triggers the navigation error. 🤔

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.

[acnowland]

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.

[kenneth4896]

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

[MalindiJohn]

Still having the same issue in vue-router 4.1.6

vue-router.js?v=f9d707fe:552 Uncaught (in promise) Error: No match for
 {"name":"index","params":{}}
    at createRouterError (vue-router.js?v=f9d707fe:552:19)
    at Object.resolve (vue-router.js?v=f9d707fe:1004:15)
    at Object.resolve (vue-router.js?v=f9d707fe:2160:34)
    at resolveNavLinkRouteName (utils.ts:38:3)
    at Proxy.isNavLinkActive (utils.ts:50:3)
    at Proxy._sfc_render (HorizontalNavLink.vue:33:44)
    at renderComponentRoot (chunk-RMIPITSQ.js?v=f9d707fe:2250:39)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-RMIPITSQ.js?v=f9d707fe:5516:46)
    at ReactiveEffect.run (chunk-RMIPITSQ.js?v=f9d707fe:1418:23)
    at instance.update (chunk-RMIPITSQ.js?v=f9d707fe:5615:52)

Any workaround here?

[rwam]

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.

[dante4rt]

Having same issue in vue-router 4.0.0.

[Bekzod101001]

Having same issue in vue-router 4.2.5, when using with vuetify navigation drawer

[bbedyukh]

Idk if the following code can help you, but try it.

I read adding the optional symbol (?) on declartion path solve this problem.

Example

const HistoryCarPage = () => import('@/pages/HistoryCarPage/HistoryCarPage.vue')
const CarPage = () => import('@/pages/CarPage/CarPage.vue')

export default [
  { name: 'cars', path: '/cars', component: CarPage },
  { name: 'cars.history', path: '/cars/:carId?/history', component: HistoryCarPage }
]

Greetings.

[JhumanJ]

Same issue in latest version of Nuxt

[saidinusah]

hi, is there any fix for this? major bug with my nuxt app

[shashankgaurav17]

still happening..not fixed

[saidinusah]

yes, make your params for nested routes optional. that's the work around i found

[jedifunk]

@1nusah this does not always work.

{
        path: 'home/:yearParam',
        name: 'Year',
        component: () => import('@/views/YearView.vue'),
        props: true,
      },
      {
        path: 'home/:yearParam/:dateParam',
        name: 'Date',
        component: () => import('@/views/ShowView.vue'),
        props: true,
      },

  adding '?' to `/:yearParam` errors the parent, adding ? to `/:yearParam?/:dateParam` makes parent and then year work, but /year/date errors
  
  i also tested it for nested vs unnested, and it still errors out if unnested. my original setup is using Tabs and these routes are inside my Tabs... but even moving them out to be unnested and turning off Tabs gives the same error

[edimitchel]

I still have this issue with Nuxt and nested route. My params is optional and set as the same level than a sibling route without param. The only way for me is to use route name instead of route pass.

[Kilian-Pichard]

I confirm edimitchel, I still have the same issue with Nuxt 3.11.2 ans vue-router 4.3.2.
The two following components doesn't work:
<NuxtLink :to="/id">id</NuxtLink>
<NuxtLink :to="{ name: 'id', params: { id: 'id' } }">Username</NuxtLink>

[edimitchel]

Let's build a reproduction to help the resolution of this issue.

I made it work by using Vue router directly instead of using navigateTo method.

[Kilian-Pichard]

@edimitchel, I'm in! How do you want to do it?

And how did you get it to work using the Vue router directly?

[edimitchel]

I start a Stackblitz project: https://stackblitz.com/edit/nuxt-starter-4crj1a?file=app%2Fpages%2Findex.vue
(it uses the next directory organisation coming from upcoming Nuxt 4 version).
For the moment, I wasn't able to reproduce the issue, can you try to reproduce it on your side?

I had a side effect issue about this error where when I prevent a redirection by using onBeforeRouteLeave then doing the navigateTo on the root of the app, nothing happen, using useRouter().push method fixed the problem.

[Kilian-Pichard]

I forked your Stackblitz project and I tried to replicate my issue. I found it.
The problem I had was that I was calling route.params.X from a layout. And apparently layouts don't return routes from const route = useRoute().
Example here: https://stackblitz.com/edit/nuxt-starter-dkd15p?file=app%2Flayouts%2Fdefault.vue

[JulienDecruydt]

Hello,

Still have the same bug in NUXT ^3.12.4.
When clicking to go back to landing page, the issue is throw even if landing.vue doesn't need any param.

Structure folder :

- [slug]
  - index.vue
- landing.vue

Component button (nuxt-link behind) :

<CoreButton 
  :to="{
       name: 'landing',
   }" 
   text="Go to home"
/>

Can't give a repo because i work on an private repo but that likely the same as the author's post

[edimitchel]

@JulienDecruydt do you use a component library? The issue I got was created by a bad usage of NuxtLink from a Vuetify component. By using native NuxtLink instead of TabLink, I resolve my issue.

[JulienDecruydt]

@JulienDecruydt do you use a component library? The issue I got was created by a bad usage of NuxtLink from a Vuetify component. By using native NuxtLink instead of TabLink, I resolve my issue.

Thanks for your help ! But I don't use a components library.

I've solved the issue.
If someone has the same problem and others solutions don't work, try this :

• Add <Suspense> around your NuxtLayout and NuxtPage
• Add <Suspense> around your <slot>

SSR doesn't hydrate params of <nuxt-link> and nuxt considerate this has empty when it's rendered

Reference : here

[tobychidi]

I have been having this issue as well. Why is it closed? It seems my issue maybe different but related and it appears in productions as well.

Temp fix again was making the params optional with [[param]] in Nuxt 3