Vue-Router入门(二) ：动态路由及语法匹配

前言

在上一篇文章Vue-Router入门(一) ：初识路由中我们对于路由有了初步的一些了解。其中提到了如何创建路由实例，讲解了路由的一些配置，也提到了每个路由会有一个对应的组件。但是一个组件不一定只对应一个路由，如何用一个组件去对应多个路由，本节就来介绍一下动态路由。

动态路由是什么

我们写的最多的路由路由比如/about是静态路由，

{ 
    path: "/about", 
    name: "about", 
    component: () => import("../views/AboutView.vue"), 
},

与之对应的还有动态路由，动态就意味着路由中有可变的部分。这个部分由参数表示，该参数称之为路径参数。

为什么会有动态路由呢？假设我们有一个users页面，该页面的数据根据id会展示不同的数据，我们需要把它放到url上获取，这时候路由的uid是动态的，如果我们用静态路由，每个uid都需要对应一个路由：

   path: '/users/1'
   path: '/users/2'
   ...

因为路由只能对应一个组件，这么做肯定不现实，于是就有了动态路由，我们把动态部分uid变成一个参数，只要前面路径一样的路由就展示同一个组件，不管这uid有多少个，我们就写一个路由就可以。动态路由的语法为：

路由/:动态参数

上面的edit我们就可以用动态路由:

   { 
       path: '/users/:id',
       component: User 
   },

注意路径参数前面的冒号一定不能丢，而路径参数我们可以通过params去获取，关于路由传参我们后续会专门讲解。

我们在/users加上路径参数，让它变成动态路由。

   {
    path: '/users/:id',
    name: 'users',
    component: () => import('@/components/Users.vue')
  }

路径参数可以有多个，都是冒号跟参数名称，并且这些参数都会放到params里面。动态路由对应着同一个组件，为了提交性能，此时组件是复用 ，这也就意味着当路径参数变化时，生命周期不会被调用。

匹配语法

动态路由之所以能够对应同一个组件，也是有具体的匹配语法，提到匹配我们首先想到的肯定就是正则表达式，利用正则表达式让我们匹配到的路由范围更加广阔。比如给uid增加一个类型与长度的判断：

    path: '/users/:uid(\d{2,4})'

uid必须为数字并且长度为2-4，如果我们打开/users/1不符合匹配条件，页面就是空白。

Sensitive 与 strict 路由配置

默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。例如，路由 /users 将匹配 /users、/users/、甚至 /Users/。这种行为可以通过 strict 和 sensitive 选项来修改，它们既可以应用在整个全局路由上，又可以应用于当前路由上：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 将匹配 /users/posva 而非：
    // - /users/posva/ 当 strict: true
    // - /Users/posva 当 sensitive: true
    { path: '/users/:id', sensitive: true },
    // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
    { path: '/users/:id?' },
  ],
  strict: true, 
})