Vue3中路由配置Catch all routes (“*“) must .....问题

Vue3中路由配置Catch all routes (“*”) must …问题

1. 业务场景描述

1. 加载并添加异步路由场景

从vue2项目转换为Vue3项目时，路由导航守卫中加载后端返回的动态路由，并配置未识别的路由自动跳转指定错误页面(如404页面)时，出现了ue-router.mjs:1321 Uncaught (in promise) Error: Catch all routes ("*") must now be defined using a param with a custom regexp 的问题

2. vue2中加载并添加异步路由(OK)

Vue2中路由导航守卫中加载动态路由案例代码如下

let asyncRouter = []
// 路由导航守卫中，加载动态路由
router.beforeEach((to, from, next) => {
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    const token = tokenStore.get('token')
    if (token) {
      dbApi.getRouter({}).then((response) => {
        const res = response.data
        asyncRouter = res.data
        asyncRouter.push({       
          component: "error/404",
          name: "404",
          path: "*" //问题主要出现在这里
        });
        store.commit('setRouters', asyncRouter)
        goTo(to, next,asyncRouter)
      })
    } else {
      if (to.path === '/') {
        next()
      }
    }
  }
})

router.afterEach(() => {
  //....
})

function goTo(to, next,asyncRouter) {
  router.addRoutes(asyncRouter) //注意这里时Vue2中添加路由的方法，与Vue3有所区别
  next({...to, replace: true})
}

3. 转vue3后不好使(Error)

1. 代码

let asyncRouter = []
// 路由导航守卫中，加载动态路由
router.beforeEach((to, from, next) => {
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    const accountStore = useAccountStore();
    const token = accountStore.token
    if (token) {
      dbApi.getRouter({}).then((response) => {
        const res = response.data
        asyncRouter = res.data
        asyncRouter.push({       
          component: "error/404",
          name: "404",
          path: "*" //问题主要出现在这里
        });
        store.commit('setRouters', asyncRouter)
        goTo(to, next,asyncRouter)
      })
    } else {
      if (to.path === '/') {
        next()
      }
    }
  }
})

router.afterEach(() => {
  //....
})

function goTo(to, next,asyncRouter) {
    asyncRouter.forEach((route) => {     
        router.addRoute(route) //注意这里vue3添加路由方式，与Vue2有所区别
    })
     next({...to, replace: true})
}

2. 错误

详细信息如下

vue-router.mjs:1321  Uncaught (in promise) Error: Catch all routes ("*") must now be defined using a param with a custom regexp.
See more at https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes.
    at Object.addRoute (vue-router.mjs:1321:23)
    at Object.addRoute (vue-router.mjs:2986:24)
    at index.ts:119:16
    at Array.forEach (<anonymous>)
    at go (index.ts:117:17)
    at index.ts:93:25

2. 处理方式

未识别的路由自动跳转指定错误页面(如404页面)时，将路由中的path配置{ path: "*"}改为{path: "/:catchAll(.*)"}即可

1. 修改前

 asyncRouter.push({       
    component: "error/404",
    name: "404",
     path: "*"
 });

2. 修改后

 asyncRouter.push({       
    component: "error/404",
    name: "404",
    path: "/:catchAll(.*)"
 });

3. vue3中完整代码案例

let asyncRouter = []
// 路由导航守卫中，加载动态路由
router.beforeEach((to, from, next) => {
  if (whiteList.indexOf(to.path) !== -1) {
    next()
  } else {
    const accountStore = useAccountStore();
    const token = accountStore.token
    if (token) {
      dbApi.getRouter({}).then((response) => {
        const res = response.data
        asyncRouter = res.data
        asyncRouter.push({       
          component: "error/404",
          name: "404",
          path: "/:catchAll(.*)"
        });
        store.commit('setRouters', asyncRouter)
        goTo(to, next,asyncRouter)
      })
    } else {
      if (to.path === '/') {
        next()
      }
    }
  }
})

router.afterEach(() => {
  //....
})

function goTo(to, next,asyncRouter) {
    asyncRouter.forEach((route) => {     
        router.addRoute(route) //注意这里是vue3添加路由方式，与Vue2有所区别
    })
     next({...to, replace: true})
}