Vue3基础(20)___Vue3配置错误路由重定向写法

简介: 本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。

报错信息:
Catch all routes ("*") must now be defined using a param with a custom regexp.
在这里插入图片描述
在这里插入图片描述

原因是我在vue3项目中配置错误路由重定向的时候使用了vue2的写法,vue2的写法不再适用vue3:

vue2重定向写法:

        //直接报错
        {
            path: "*",
            redirect: "/login"
        },

vue3重定向写法:
1:

           {
            path: "/:catchAll(.*)",
            redirect: "/login"
        }

2:

          {
            path: "/:pathMatch(.*)",
            redirect: "/login"
        }

3:

        {
            path: "/:pathMatch(.*)*",
            redirect: "/login"
        }

参考文章:https://blog.csdn.net/Dawnchen1/article/details/116742166

目录
相关文章
|
10月前
|
JavaScript 前端开发
vue路由NavigationDuplicated错误
vue路由NavigationDuplicated错误
70 0
|
10月前
|
JavaScript 数据可视化 前端开发
【Vue.js】vue-cli搭建SPA项目并实现路由与嵌套路由---详细讲解
【Vue.js】vue-cli搭建SPA项目并实现路由与嵌套路由---详细讲解
93 0
|
4月前
|
JavaScript
vue的重定向解决方法
vue的重定向解决方法
89 1
|
3月前
|
JavaScript
|
3月前
|
缓存 JavaScript API
Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法
Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法
|
4月前
|
JavaScript
vue跳转方式
vue跳转方式
|
JavaScript
vue路由跳转传参的方式有哪些
vue路由跳转传参的方式有哪些
|
4月前
|
JavaScript
Vue路由传参的几种方式详解
vue-router传递参数分为两大类: >编程式的导航 router.push 声明式的导航 <router-link>
|
12月前
|
JavaScript 测试技术 开发工具
【Vue】使用vue-cli搭建SPA项目的路由,嵌套路由
Vue CLI 是一个基于 Vue.js 的官方脚手架工具,用于自动生成vue.js+webpack的项目模板,它可以帮助开发者快速搭建 Vue.js 项目的基础结构,并提供了一系列的开发工具和配置选项。Vue CLI 提供了命令行界面和图形化界面两种方式,开发者可以根据自己的喜好选择使用。使用 Vue CLI,可以轻松进行项目初始化、管理依赖、开发调试、构建打包等常用开发任务,简化了 Vue.js 应用的开发流程,提高了开发效率。创建命令如下:xxx为自己创建项目的名称必须先安装等一些必要的环境。
|
JavaScript 前端开发
Vue(Vue2+Vue3)——66.路由传递query参数两种方式
Vue(Vue2+Vue3)——66.路由传递query参数两种方式