Vue3-28-路由-大小写敏感 与 严格匹配

默认情况

大小写敏感 ： 默认情况下路由匹配是大小写不敏感的；
严格匹配 ： 主要指的是 路由的路径最后是否包含 【/】，默认是 非严格的，即，最后有没有 【/】无影响。

涉及的关键字

sensitive : 控制是否大小写敏感；
strict : 控制是否严格匹配。
以上两个关键字，既可以在每一条路由配置中使用；
也可以在整个的路由实例中配置，使所有的路由配置都生效。
【建议】 ： 在每个路由中单独配置，可以控制的更灵活。

使用案例

为了简便起见，本案例仅展示 核心代码的部分。
主要涉及的就是路由的配置。

sensitive 大小写敏感配置

路由配置表

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入两个组件
import componentA from "./componentA.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
	// sensitive ：true 表示大小敏感
    {path:'/a1',component:componentA,sensitive:true},

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数，表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

运行效果

正常的效果	错误的效果

strict 严格模式配置

路由配置表

// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入两个组件
import componentA from "./componentA.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
	// strict : 表示严格模式
    {path:'/a1',component:componentA,strict:true}
]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数，表示是路由的一个前缀
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

运行效果

正确的结果	错误的结果