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

2024-02-08 11:12

本文主要是介绍Vue3中路由配置Catch all routes (“*“) must .....问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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. 加载并添加异步路由场景

从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.dataasyncRouter = res.dataasyncRouter.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.tokenif (token) {dbApi.getRouter({}).then((response) => {const res = response.dataasyncRouter = res.dataasyncRouter.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:16at 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.tokenif (token) {dbApi.getRouter({}).then((response) => {const res = response.dataasyncRouter = res.dataasyncRouter.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})
}

这篇关于Vue3中路由配置Catch all routes (“*“) must .....问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/690842

相关文章

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

关于MongoDB图片URL存储异常问题以及解决

《关于MongoDB图片URL存储异常问题以及解决》:本文主要介绍关于MongoDB图片URL存储异常问题以及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录MongoDB图片URL存储异常问题项目场景问题描述原因分析解决方案预防措施js总结MongoDB图

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Mysql如何解决死锁问题

《Mysql如何解决死锁问题》:本文主要介绍Mysql如何解决死锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录【一】mysql中锁分类和加锁情况【1】按锁的粒度分类全局锁表级锁行级锁【2】按锁的模式分类【二】加锁方式的影响因素【三】Mysql的死锁情况【1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H