Navigating from router-view throws Missing required param

phillduffy commented 3 years ago

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 commented 3 years ago

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

alijuniorbr commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

MatthewAry commented 1 year ago

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 https://github.com/vuetifyjs/vuetify/issues/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 commented 1 year ago

@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 commented 1 year ago

Please see my comment on what I have learned so far. https://github.com/vuetifyjs/vuetify/issues/17176#issuecomment-1517843304

postmodernistx commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

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

MalindiJohn commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

Having same issue in vue-router 4.0.0.

Bekzod101001 commented 8 months ago

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

bbedyukh commented 8 months ago

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 commented 7 months ago

Same issue in latest version of Nuxt

saidinusah commented 7 months ago

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

shashankgaurav17 commented 5 months ago

still happening..not fixed

saidinusah commented 5 months ago

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

jedifunk commented 5 months ago

@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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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 commented 4 months ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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

vuejs / router