vue3.x路由404通配处理

vue-router3.x通配规则

vue2.x对应的vue-router3.x的404路由通配方式：

{path: '*', // 会匹配所有路径name: '404',component: () => import('@/views/404/index.vue')
}

vue-router4.x通配规则

上面的代码在vue3.x对应的vue-router4.x的路由通配中就没有效果了，需要改成这样才行：

{path: '/:error*', // /:error -> 匹配 /, /one, /one/two, /one/two/three, 等name: '404',component: () => import('@/views/404/index.vue')
}

匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。

[success] PS：404通配路由一般放到路由定义的最底部

更多前端知识，请关注小程序，不定期有惊喜！

vue3.x路由404通配处理相关推荐

VUE3 Router路由
使用Vue Router可以在不同的组件间切换,根据不同的url地址,路由跳转到不同的组件提供了俩个路由组件 <router-link>:用来定义导航,默认会创建<a>标签, ...
CSS之常用选择器（元素、id、类、通配选择器）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
linux find命令通配,Linux Find 命令的详解与研究
Find命令用来在指定目录下查找文件.Linux下类似的查找命令还有 which.locate.whereis. 区别: which 查找命令字所在的位置 eg. whi ...
css通配选择符用什么表示,css的选择符
元素选择符 Element Selectors* E E#id E.class 关系选择符 Relationship SelectorsE F E>F E+F E~F属性选择符 Attribut ...
nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
不正确有三种形式说法通配泛型_一看就懂详解JAVA泛型通配符T，E，K，V区别...
1. 先解释下泛型概念泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛 ...
Java：高级之泛型概念引入，泛型可以设置多个类型参数，泛型继承和泛型接口实现，限制泛型可用类型，泛型通配的方式，泛型方法，泛型方法限制泛型可用类型
目录页泛型简介泛型类限制泛型可用类型类型通配声明泛型方法问题引入如果我们需要产生多个对象,每个对象的逻辑完 ...
SpringCloud Gateway配置自定义路由404坑
一.场景复现微服务自定义路由,返回404页面. ①如图: (1)springcloud-gateway的路由设置 @Configuration public class RouteConfig {@ ...
文件名重定向到txt中Linux,Linux上glob用于实现文件名的通配、IO重定向及管道
Linux中所谓的通配是指,显示以指定条件为条件的文件:即通配的含义是指搜寻以已知条件为前提的目标文件. 常用文件通配符有: 文件通配符含义例子 * 任意长度的任意字符如a*,搜寻所有以a为首的 ...

vue3.x路由404通配处理

vue-router3.x通配规则

vue-router4.x通配规则

匹配优先级

vue3.x路由404通配处理相关推荐

最新文章

热门文章