MSc CDA Take-Home

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

文章目录

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

1. 业务场景描述

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

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

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. 处理方式

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