router.beforeEach with '/:pathMatch(.*)*' can not work perfectly.

[NO-MAP]

Version

4.0.0-rc.3

Reproduction link

https://codepen.io/no-map/pen/ZEONNxo

Steps to reproduce

i am using router.beforeEach function to add async routers.

as follows

router.beforeEach(async (to, from, next) => {
  if(noServiceRoutes) {
    await getServiceRoutes()
    router.addRoute()
    next({ ...to, replace: true })
  }
  ...
})

this is work.

but when i use '/:pathMatch(.)' to redirect all notFound routes to 404

 {
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  },

something wrong.

when i refresh my brower. router.beforeEach can not work. allways redirect to 404 pages.

What is expected?

i think router.beforeEach shoud work.

What is actually happening?

router.beforeEach did not work.

---

please tell me how to make it works. thanks

[posva]

This is expected because redirect records trigger before all navigation guards. In general, don't do a redirect of a catch all to a fixed url, it removes the information of the route that didn't exist and is confusing to users. A workaround in your case is to use a beforeEnter: https://next.router.vuejs.org/guide/advanced/navigation-guards.html#the-full-navigation-resolution-flow

[NO-MAP]

however, it worked perfectly on my another computer....i don't know what happened. so strange.

[NO-MAP]

however, it worked perfectly on my another computer....i don't know what happened. so strange.

i think i found the reason. i give up using redirect property to catch all not found.

{
    path: '/:pathMatch(.*)*',
    component: NotFound,
  },

but still don't know why this can work.

[huedcode]

I have the same problem.When I use Addroute, the refresh browser redirects to 404.How did you solve?

[NO-MAP]

I have the same problem.When I use Addroute, the refresh browser redirects to 404.How did you solve?

as follows

// router.js
const defaultRouters = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  }, {
    path: '/404',
    name: 'NotFound',
    component: NotFound
  }, {
    path: '/401',
    name: 'Forbidden',
    component: Forbidden
  }, {
    path: '/',
    name: 'Layout',
    redirect: '/home',
    component: Layout,
    children: [
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
          title: "Home"
        }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    component: NotFound,
  },
]

addRoute function

router.addRoute('Layout', route);