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

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

文章目录

[Vue3中路由配置Catch all routes ("*") must .....问题](#Vue3中路由配置Catch all routes ("*") must .....问题)
[1. 业务场景描述](#1. 业务场景描述)
- [1. 加载并添加异步路由场景](#1. 加载并添加异步路由场景)
- [2. vue2中加载并添加异步路由(OK)](#2. vue2中加载并添加异步路由(OK))
- [3. 转vue3后不好使(Error)](#3. 转vue3后不好使(Error))
- - [1. 代码](#1. 代码)
  - [2. 错误](#2. 错误)
[2. 处理方式](#2. 处理方式)
- [1. 修改前](#1. 修改前)
- [2. 修改后](#2. 修改后)
- [3. vue3中完整代码案例](#3. vue3中完整代码案例)

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中路由导航守卫中加载动态路由案例代码如下

js 复制代码

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. 代码

ts 复制代码

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. 错误

详细信息如下

shell 复制代码

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. 修改前

js 复制代码

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

2. 修改后

js 复制代码

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

3. vue3中完整代码案例

js 复制代码

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})
}