vue-router 4 '/:pathMatch(.*)*' not working?

user_14020115 0
Viewed 277

hello guys I want to ask about vue-router. when I use vue 2 if there is a page that doesn't match, I use path: '*' to go to my page404 but in vue 3 it's been replaced with '/:pathMatch(.)' after i tried it the warning in console disappeared but i just got a blank page and it doesn't point to my page404. did i miss something? I'm newbie with vue 3

here is the version I'm using:

  1. vue: ^3.0.0
  2. vue-router: ^4.0.0-0

and this is my index.js

import { createRouter, createWebHistory, RouterView } from 'vue-router'

const routes = [
   {
      path: '/',
      redirect: '/login',
      component: RouterView,
      children: [{
        path: '/login',
        component: () => import('@/views/login/Login.vue'),
      }]
   },
   {
      path: '/:pathMatch(.*)*',
      component: () => import('@/views/page404/Page404.vue')
   }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
vue-router vue.js javascript
1 Answers

You can try to write it like this

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