[Vuejs]-Vue-router 4 '/:pathMatch(.*)*' not working?

by

0👍

You can try to write it like this

{
    path: "/:pathMatch(.*)*",
    redirect: "/404"
},
{
    path: "/404",
    name: "404",
    component: () => import("@/views/page404/Page404.vue")
}

0👍

Try /:pathMatch(.*) instead.

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: NotFound,
    },
    {
      path: "/about",
      component: AboutPage,
    },
    {
      path: "/blogs",
      component: BlogPage,
    },
    {
      path: "/:pathMatch(.*)",
      component: NotFound,
    },
    {
      path: "/:pathMatch(.*)*",
      component: NotFound,
    },
  ],
});

Difference between /:pathMatch(.*) and /:pathMatch(.*)* is their prefix route pattern.

For expample –

In /foo/:pathMatch(.*), it means that it accept that prefixed with ‘/foo’ /foo/any-miss-name.But when you try foo/any-miss-name/any-miss-name2, any-miss-name2‘s prefix is any-miss-name and not /foo.That is why, it will not match and not working.

In /foo/:pathMatch(.*)*,it means that it accept any prefixed pattern (no need to start with ‘/foo’).So whenever you try /foo/any-miss-name/any-miss-name2/any-miss-name(n)/,it will match and will work perfectly.

Leave a comment