共计 2004 个字符，预计需要花费 6 分钟才能阅读完成。
此为 Vue Router 深度用法的第二篇，主要讲述动态路由匹配用法。第一篇的链接在此：https://segmentfault.com/a/11…
动态路由匹配是用于把某种模式匹配到的所有路由，全都映射到同个组件。通过给路由路径一个变量，即变成动态路由，把变化的内容赋值给变量即可。
例如文章详情页是一个组件，只有一个路由，从文章列表页点进来，变化的只是文章 id 而已。将其赋予给设定的变量，然后通过 watch ‘$route’ 或者使用 beforeRouteUpdate 导航守卫监测路由变化，传递新的文章 id 获取文章详情即可。在组件里，可以通过 this.$route.params.xx 获取当前文章 id。
一个路由地址可以设置多个变量，适合有分叉情况的内容。例如 path: ‘/params/:foo/:bar’
从文章列表页点进来即传递路由变量，有三种方法：（1）<router-link to=”/params/list/1″> 跳转到 /params/list/1</router-link>（2）this.$router.push({name: ‘articles’, params: { foo: ‘list’, bar: 1} })（3）this.$router.push({path: ‘/params/list/1’}) // path 不能与 params 同时使用
高级匹配模式
这里主要研究的是动态路由匹配的高级匹配模式，以达到合并差异不大的路由、减少路由数量的目的。
高级匹配即结合简单的正则匹配方法，给予路由更多的限制和操作空间。
1、可选路由参数
路由参数可选，添加与否都对应同一个组件。可以在组件里使用 v-if / v-show 结合 $route.params.xx 展现不同的内容
// a param can be made optional by adding “?”
{path: ‘/optional-params/:foo?’}
// 这两个链接都对应同个组件
<li><router-link to=”/optional-params”>/optional-params</router-link></li>
<li><router-link to=”/optional-params/foo”>/optional-params/foo</router-link></li>
2、精确匹配参数
只有参数通过正则匹配，完全符合格式，才能会跳转。例如只有参数是数字 / 手机号才允许跳转。适用于对第三方不规范格式的数据进行筛选。
// a param can be followed by a regex pattern in parens
// this route will only be matched if :id is all numbers
{path: ‘/params-with-regex/:id(\\d+)’ }
// 只匹配数字
<li><router-link to=”/params-with-regex/123″>/params-with-regex/123</router-link></li>
// 只匹配手机号
{path: ‘/params-with-regex/:id(^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$)’ }
<li><router-link to=”/params-with-regex/abc”>/params-with-regex/13800138000</router-link></li>
3、匹配任意参数
不对参数格式、数量进行限制，任意参数都可。
// asterisk can match anything
{path: ‘/asterisk/*’}
// 这两个都是同一组件
<li><router-link to=”/asterisk/foo”>/asterisk/foo</router-link></li>
<li><router-link to=”/asterisk/foo/bar”>/asterisk/foo/bar</router-link></li>
4、部分可选参数
结合可选路由参数与多路由参数，其中一部分参数可选。适用于分叉情况下不确定参数数量的情况。
// make part of the path optional by wrapping with parens and add “?”
{path: ‘/optional-group/(foo/)?bar’ }
// 这两个都是同一组件
<li><router-link to=”/optional-group/bar”>/optional-group/bar</router-link></li>
<li><router-link to=”/optional-group/foo/bar”>/optional-group/foo/bar</router-link></li>
