vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.

简介: vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.

@[TOC](vue3配置路由报错Catch all routes ("*") must now be defined using a param with a custom regexp.)

背景

vue3项目在配置路由时指定未识别的路径自动跳转404页面时,报错Catch all routes ("*") must now be defined using a param with a custom regexp.
意思是捕获所有路由(“
”)现在必须使用带有自定义正则表达式的参数来定义

解决方案

改为以下配置方式:

{
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
},

完整路由配置:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/views/Index/Index.vue'),
  },
  // {
  //   path: '/', // 根目录自动匹配/home
  //   redirect: '/index',
  // },
  {
    path: '/404',
    name: 'PageNotExist',
    component: () => import('@/views/PageNotExist/PageNotExist.vue'),
  },
  {
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
  },
];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
export default router;


目录
相关文章
|
2天前
|
缓存 JavaScript
一文彻底学会Vue路由
Vue Router简介,包括基本使用、嵌套路由、参数传递和路由守卫。首先,通过`npm i vue-router@3`安装,然后在`main.js`引入并应用。配置路由时,创建VueRouter实例,定义如`/home`、`/about`等路径及其对应组件。使用`&lt;router-link&gt;`进行切换,`&lt;router-view&gt;`展示组件。嵌套路由通过`children`配置多级路径,参数传递可使用`query`或`params`。路由守卫分为全局、独享和组件内三种,用于控制访问权限。
11 1
一文彻底学会Vue路由
|
2天前
|
JavaScript API
Vue3 基础语法
该内容介绍了Vue项目的创建和Vue3的语法、响应式API、生命周期、组件通信及跨组件通信方法。包括使用`npm init vue@latest`创建项目,`npm install`初始化,Vue3的`setup`语法,`reactive`、`ref`、`computed`和`watch`的用法,生命周期图解,以及父子组件间的数据传递。此外,还提到了Vue3中使用`provide`和`inject`进行跨层数据传递,以及通过Pinia库进行状态管理。
17 0
Vue3 基础语法
|
5天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
10 0
|
6天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
16 3
|
8天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
22 0
|
8天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
8天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
20 0
|
8天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
26 0
|
8天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
36 0