router: Navigating from router-view throws Missing required param

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

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:

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

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.

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!