Vue Router - catch all wildcard not working

Catch all routes (/*) must now be defined using a parameter with a custom regex: /:catchAll(.*)

For example:

    {
      // path: "*",
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: PageNotFound,
      meta: {
        requiresAuth: false
      }
    }

Personally, for Vue 2's * (star or catch all) routes in Vue 3 I use:

{
  path: '/:pathMatch(.*)*', <== THIS
  name: 'not-found',
  component: NotFound
}

---

Catch all routes (*, /*) must now be defined using a parameter with a custom regex:

The parameter name can be whatever you want like catchAll, pathMatch, noPage etc

{
  path: '/:pathMatch(.*)*', //will match everything and put it under `$route.params.pathMatch`
  name: 'not-found',
  component: NotFound
}

{ 
  path: '/user-:afterUser(.*)',// will match anything starting with `/user-` and put it under `$route.params.afterUser`
  component: UserGeneric
}

---

---

/:pathMatch(.*)*

• The last * it is necessary if you plan on directly navigating to the not-found route using its name.

• If you omit it the / character in params, it will be encoded when resolving or pushing.

For example if you use path: /:pathMatch(.*) (note: without the last asterisk) and you go to /user/not-found (a page that doesn't exists) the this.$route.params.pathMatch will be a string => 'user/not-found'

// bad example if using named routes:
router.resolve({
  name: 'bad-not-found',
  params: { pathMatch: 'not/found' },
}).href // '/not%2Ffound'

Instead, if you use path: /:pathMatch(.*)* (note: with asterisk) this.$route.params.pathMatch will be an array ['user', 'not-found']

// good example:
router.resolve({
  name: 'not-found',
  params: { pathMatch: ['not', 'found'] },
}).href // '/not/found'

Please read docs: From migration from vue 2 to vue 3 and Catch all / 404 Not found Route