此為 Vue Router 深度用法的第二篇，主要講述動態(tài)路由匹配用法。第一篇的鏈接在此： https://segmentfault.com/a/11...

動態(tài)路由匹配是用于把某種模式匹配到的所有路由，全都映射到同個組件。通過給路由路徑一個變量，即變成動態(tài)路由，把變化的內(nèi)容賦值給變量即可。

例如文章詳情頁是一個組件，只有一個路由，從文章列表頁點進來，變化的只是文章 id 而已。將其賦予給設定的變量，然后通過 watch '$route' 或者使用 beforeRouteUpdate 導航守衛(wèi)監(jiān)測路由變化，傳遞新的文章 id 獲取文章詳情即可。在組件里，可以通過 this.$route.params.xx 獲取當前文章 id。

一個路由地址可以設置多個變量，適合有分叉情況的內(nèi)容。例如 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 同時使用

高級匹配模式

這里主要研究的是動態(tài)路由匹配的高級匹配模式，以達到合并差異不大的路由、減少路由數(shù)量的目的。

高級匹配即結合簡單的正則匹配方法，給予路由更多的限制和操作空間。

1、可選路由參數(shù)

路由參數(shù)可選，添加與否都對應同一個組件?？梢栽诮M件里使用 v-if / v-show 結合 $route.params.xx 展現(xiàn)不同的內(nèi)容

// 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、精確匹配參數(shù)

只有參數(shù)通過正則匹配，完全符合格式，才能會跳轉。例如只有參數(shù)是數(shù)字/手機號才允許跳轉。適用于對第三方不規(guī)范格式的數(shù)據(jù)進行篩選。

// 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+)' } // 只匹配數(shù)字 <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>

3、匹配任意參數(shù)

不對參數(shù)格式、數(shù)量進行限制，任意參數(shù)都可。

// 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、部分可選參數(shù)

結合可選路由參數(shù)與多路由參數(shù)，其中一部分參數(shù)可選。適用于分叉情況下不確定參數(shù)數(shù)量的情況。

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

總結

以上是生活随笔為你收集整理的你可能不清楚的 Vue Router 深度用法（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。