你可能不清楚的 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>