Vue-Router 第三节：路由的匹配语法

1、路径参数使用自定义正则

在我们使用路由动态参数时，会碰到两个路由路径都是从/开始后跟着动态参数。

// router/index.ts   
{
        path: '/:id',
        component: import("@/views/user/index.vue")
    },
    {
        path: '/:names',
        component: import("@/views/notFont/index.vue")
    }

上面这组就可能会出现相同的两个url,我们就可以通多路径参数使用自定义正则来区分开两个URL。

 // router/index.ts   
{
        path: '/:id(\d+)',    // \d 匹配一个数字字符。等价于 [0-9]。 +: 匹配前面的子表达式一次或多次
        component: import("@/views/user/index.vue")
    },
    {
        path: '/:names(\D+)',   //匹配一个非数字字符。等价于 [^0-9]  +: 匹配前面的子表达式一次或多次
        component: import("@/views/notFont/index.vue")
    }

<!-- APP.vue -->
    <router-view />
    <router-link to="/11">进入数字字符路由页面</router-link>
    <br>
    <router-link to="/werq">进入字母字符路由页面</router-link>

（1） 这是点击匹配数字路由进入的页面。

（2）这是点击匹配字母路由进入的页面。

注：具体想如何匹配可自查正则。

2、Sensitive 与 strict 路由配置

sensitive : 主要控制路由匹配是否大小写敏感,默认情况下，路由匹配是不区分大小写的，即路径中的大写和小写字符都被视为相同。如果将Sensitive设置为true，那么路由匹配将变得大小写敏感，这意味着路径中的大写和小写字符将被视为不同，需要精确匹配。

Strict ： 则控制路由的路径最后是否包含斜线（/），即是否进行严格匹配。默认情况下，路由匹配是非严格的，也就是说，路径最后是否包含斜线并不会影响匹配结果。如果将Strict设置为true，那么路由匹配将变得严格，要求路径最后必须包含斜线才能进行匹配。

  // router/index.ts  
{
        path: '/names',
        sensitive: true ,   // 此匹配项将变得大小写敏感.大小写被视为不同，需要精确匹配。
        component: import("@/views/notFont/index.vue")
    },
    {
        path: '/user/',
        strict: true ,  // 此匹配项将要求路径最后必须包含斜线才能进行匹配。
        component: import("@/views/user/index.vue")
    }

  <!-- APP.vue -->
  <!-- 错误写法将进不去匹配路由页面 -->
    <router-link to="/Names">路由小写 我错误 path写法 ：小写 Sensitive为true </router-link>
    <br>
    <router-link to="/names">路由小写 我正确 path写法 小写 Sensitive为true </router-link>
    <br>
    <br>
  <!-- 错误写法将进不去匹配路由页面 -->
    <router-link to="/user">路由有斜杠 错误写法： 我无斜杠 Strict 为 true</router-link>
    <br>
    <router-link to="/user/">路由有斜杠 我正确写法： 我有斜杠 Strict 为 true</router-link>
​
​

Sensitive：错误示例：

Sensitive：正确示例：

Strict ：错误示例：

Strict ：正确示例：

3、可选参数

可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选,即为可有可无：

  // router/index.ts  
   {
        path: '/user/:id?',
        strict: true ,  // 此匹配项将要求路径最后必须包含斜线才能进行匹配。
        component: import("@/views/user/index.vue")
    }

  <!-- APP.vue -->   
    <router-link to="/user">进入user路由页面</router-link>
    <br>
    <router-link to="/user/12">进入user/12路由页面</router-link>

有：

无：