此為 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/13800138000">/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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。