動(dòng)態(tài)路由匹配

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
    { path: '/user/:id', component: User }
  ]
})

一個(gè)“路徑參數(shù)”使用冒號(hào) : 標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到 this.$route.params，可以在每個(gè)組件內(nèi)使用。

響應(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ì)象：

watch: {
    '$route' (to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }

或者使用 2.2 中引入的 beforeRouteUpdate 導(dǎo)航守衛(wèi)

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-*'
}

含有通配符的路由應(yīng)該放在最后。路由 { path: '*' } 通常用于客戶(hù)端 404 錯(cuò)誤。
當(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'

編程式的導(dǎo)航

router.push(location, onComplete?, onAbort?)

聲明式 <router-link :to="...">
編程式 router.push(...)

// 字符串
router.push('home')
// 對(duì)象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢(xún)參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 會(huì)被忽略，上述例子中的 query 并不屬于這種情況。

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

注意： 如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個(gè)用戶(hù)資料到另一個(gè) /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來(lái)響應(yīng)這個(gè)變化 (比如抓取用戶(hù)信息)。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

router.go(n)

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類(lèi)似 window.history.go(n)。

命名路由

有時(shí)候，通過(guò)一個(gè)名稱(chēng)來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候。你可以在創(chuàng)建 Router 實(shí)例的時(shí)候，在 routes 配置中給某個(gè)路由設(shè)置名稱(chēng)。