#動(dòng)態(tài)路由匹配
我們經(jīng)常需要把某種模式匹配到的所有路由忠寻，全都映射到同個(gè)組件潘懊。例如借帘，我們有一個(gè) User 組件，對(duì)于所有 ID 各不相同的用戶(hù)菇用，都要使用這個(gè)組件來(lái)渲染。那么陷揪，我們可以在 vue-router 的路由路徑中使用“動(dòng)態(tài)路徑參數(shù)”(dynamic segment) 來(lái)達(dá)到這個(gè)效果：
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
{ path: '/user/:id', component: User }
]
})
現(xiàn)在呢惋鸥，像 /user/foo 和 /user/bar 都將映射到相同的路由杂穷。
一個(gè)“路徑參數(shù)”使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)卦绣，參數(shù)值會(huì)被設(shè)置到 this.$route.params耐量，可以在每個(gè)組件內(nèi)使用。于是滤港，我們可以更新 User 的模板廊蜒，輸出當(dāng)前用戶(hù)的 ID：
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以看看這個(gè)在線(xiàn)例子。
你可以在一個(gè)路由中設(shè)置多段“路徑參數(shù)”溅漾，對(duì)應(yīng)的值都會(huì)設(shè)置到 $route.params 中山叮。例如：
| 模式 | 匹配路徑 | $route.params |
|---|---|---|
| /user/:username | /user/evan | { username: 'evan' } |
| /user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |
除了 $route.params 外，$route 對(duì)象還提供了其它有用的信息添履，例如屁倔，$route.query (如果 URL 中有查詢(xún)參數(shù))、$route.hash 等等暮胧。你可以查看 API 文檔 的詳細(xì)說(shuō)明锐借。
#響應(yīng)路由參數(shù)的變化
提醒一下，當(dāng)使用路由參數(shù)時(shí)往衷，例如從 /user/foo 導(dǎo)航到 /user/bar钞翔，原來(lái)的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件炼绘，比起銷(xiāo)毀再創(chuàng)建嗅战，復(fù)用則顯得更加高效。不過(guò)俺亮，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用驮捍。
復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話(huà)脚曾，你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：
const User = {
template: '...',
watch: {
$route(to, from) {
// 對(duì)路由變化作出響應(yīng)...
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 導(dǎo)航守衛(wèi)：
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
#捕獲所有路由或 404 Not found 路由
常規(guī)參數(shù)只會(huì)匹配被 / 分隔的 URL 片段中的字符东且。如果想匹配任意路徑，我們可以使用通配符 (*)：
{
// 會(huì)匹配所有路徑
path: '*'
}
{
// 會(huì)匹配以 `/user-` 開(kāi)頭的任意路徑
path: '/user-*'
}
當(dāng)使用通配符路由時(shí)本讥，請(qǐng)確保路由的順序是正確的珊泳，也就是說(shuō)含有通配符的路由應(yīng)該放在最后。路由 { path: '*' } 通常用于客戶(hù)端 404 錯(cuò)誤拷沸。如果你使用了History 模式色查，請(qǐng)確保正確配置你的服務(wù)器。
當(dāng)使用一個(gè)通配符時(shí)撞芍，$route.params 內(nèi)會(huì)自動(dòng)添加一個(gè)名為 pathMatch 參數(shù)秧了。它包含了 URL 通過(guò)通配符被匹配的部分：
// 給出一個(gè)路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個(gè)路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
#高級(jí)匹配模式
vue-router 使用 path-to-regexp 作為路徑匹配引擎，所以支持很多高級(jí)的匹配模式序无，例如：可選的動(dòng)態(tài)路徑參數(shù)验毡、匹配零個(gè)或多個(gè)衡创、一個(gè)或多個(gè)，甚至是自定義正則匹配晶通。查看它的文檔學(xué)習(xí)高階的路徑匹配璃氢，還有這個(gè)例子 展示 vue-router 怎么使用這類(lèi)匹配。
#匹配優(yōu)先級(jí)
有時(shí)候狮辽，同一個(gè)路徑可以匹配多個(gè)路由一也，此時(shí)，匹配的優(yōu)先級(jí)就按照路由的定義順序：誰(shuí)先定義的隘竭，誰(shuí)的優(yōu)先級(jí)就最高塘秦。
