How to redirect a 404 route to Home using vue router in Vue.js 3

Question

Hello almighty community!

I have a little problem with Vue.js 3. In the router, I'm unable to define that any unknown route should be redirected to "/".

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
 {
    path: "/*",
    redirect: "/",
  }
]

Here, I have tested the redirect: "/" works, but path: "/*" is not working. Path "/ " works only for domain.com/ ... I have also tested path: "*" but I get this error:

"Uncaught Error: Route " " should be "/ "."

How do you do a 404 redirect in the latest Vue.js3?

Answer 1

In Vue router 4 which is compatible with Vue 3 you could Catch all / 404 Not found Route as follows:

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: "/",
  }
]

LIVE DEMO