Unexpected error when starting the router: Error: Missing required param “catchAll”

Question

Does anyone knows why I got this warning?

[Vue Router warn]: Unexpected error when starting the router: Error: Missing required param "catchAll"

router.beforeEach((to, from, next) => {
  const isAuthenticated = store.getters['users/isAuthenticated']

  if (!isAuthenticated && to.name !== 'Login' && to.name !== 'Registration' && to.name !== '404') {
    next({
      name: 'Login'
    })
  } else if (isAuthenticated && store.getters['users/getUserName'] !== to.params.userName)   {
    next({
      name: '404'
    })
  } else {
    next()
  }

})

Hooligancat · Answer 1 · 2021-12-20T00:05:54.417

I see you posted the same question on the Vuejs.org forums here:

https://forum.vuejs.org/t/unexpected-error-when-starting-the-router-error-missing-required-param-catchall/115388/3

For the sake of completeness if anyone else comes across the same problem (like I did), because you are navigating to the route in code by name name: '404', you must add the * for repeated patterns.

Your original router catch all as posted on the Vue forum:

{
  path: '/:catchAll(.*)',
  name: '404',
  component: () => import(/* webpackChunkName: "404" */'@/views/404')
}

You need to use /:catchAll(.*)* as follows:

{
  path: '/:catchAll(.*)*',
  name: '404',
  component: () => import(/* webpackChunkName: "404" */'@/views/404')
}

As per the answer on the forum, see the following reference pages in the Vue router docs for more information:

https://next.router.vuejs.org/guide/migration/index.html#removed-star-or-catch-all-routes https://next.router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route

Unexpected error when starting the router: Error: Missing required param “catchAll”

1 Answers1