前言

上节讲解了如何创建路由实例并注册使用，其中讲解了路由的配置项，也提到了每个路由会有一个对应的组件，但是一个组件不一定只对应一个路由，如何用一个组件去对应多个路由，本节就来介绍一下相关内容。

动态路由

前面我们写的路由比如/home是静态路由，与之对应的还有动态路由，动态就意味着路由中有可变的部分，这个部分由参数表示，该参数称之为路径参数。为什么会有动态路由呢？假设我们有一个编辑页面，该页面的数据根据uid会展示不同的数据，我们需要把它放到url上获取，这时候路由的uid是动态的，如果我们用静态路由，每个uid都需要对应一个路由：

   path: '/edit/1'
   path: '/eidt/2'
   ...

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

   路由/:动态参数

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

   path:'/edit/:uid'

注意路径参数前面的冒号一定不能丢，而路径参数我们可以通过params去获取，关于路由传参我们后续会专门讲解。我们在/home加上路径参数，让它变成动态路由。

   {
    path: '/home/:uid',
    name: 'home',
    component: () => import('@/components/Home.vue')
  }

打开/home，并且在后面拼接任意一个uid都是该页面，我们在home页面通过params打印一下uid。

路径参数可以有多个，都是冒号跟参数名称，并且这些参数都会放到params里面。动态路由对应着同一个组件，为了提交性能，此时组件是复用，这也就意味着当路径参数变化时，生命周期不会被调用，比如我们把路径变成2，会发生控制台并没有打印出2，所以需要我们去监听路径参数，当路径参数发生变化时做对应的变化。注意如果我们从一个路由跳转到动态路由，因为页面变化，所以肯定会触发生命周期。监听参数变化的方式我们可以参用：

• watch：去监听params，发生变化时做对应的处理。
• 路由守卫：使用beforeRouteUpdate监听路由变化，然后做对应的处理。

匹配语法

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

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

uid必须为数字并且长度为2-4，此时我们打开/home/1不符合匹配条件，页面就是空白。 简而言之，如果我们想要拓展路由的匹配，对于正则表达式也要有所熟悉。注意路由匹配默认不区分大小写，也不会在意结尾是否有/。上面中/home，对于/home/、/Home等也都能匹配到。

总结

动态路由方便了页面之间的交互，还提高了组件性能，我们可以采用正则去提交路由匹配的精度与广度。