你可能不清楚的 Vue Router 深度用法（二）

此为 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 同时使用

高级匹配模式

这里主要研究的是动态路由匹配的高级匹配模式，以达到合并差别不大的路由、减小路由数量的目的。

高级匹配即结合简单的正则匹配方法，给予路由更多的限制和操做空间。

一、可选路由参数

路由参数可选，添加与否都对应同一个组件。能够在组件里使用 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>

二、精确匹配参数

只有参数经过正则匹配，彻底符合格式，才能会跳转。例如只有参数是数字/手机号才容许跳转。适用于对第三方不规范格式的数据进行筛选。

// 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/13800138000">/params-with-regex/13800138000</router-link></li>

三、匹配任意参数

不对参数格式、数量进行限制，任意参数均可。

// 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>

四、部分可选参数

结合可选路由参数与多路由参数，其中一部分参数可选。适用于分叉状况下不肯定参数数量的状况。

// 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>