vue-router

動態(tài)路由匹配

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

一個“路徑參數(shù)”使用冒號 : 標記。當匹配到一個路由時，參數(shù)值會被設置到 this.$route.params，可以在每個組件內使用善涨。

響應路由參數(shù)的變化

當使用路由參數(shù)時，例如從 /user/foo 導航到 /user/bar茶行，原來的組件實例會被復用躯概。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建畔师，復用則顯得更加高效娶靡。不過，這也意味著組件的生命周期鉤子不會再被調用看锉。
復用組件時姿锭，想對路由參數(shù)的變化作出響應的話，你可以簡單地 watch (監(jiān)測變化) $route 對象：

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

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

beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }

捕獲所有路由或 404 Not found 路由

常規(guī)參數(shù)只會匹配被 / 分隔的 URL 片段中的字符伯铣。如果想匹配任意路徑呻此，我們可以使用通配符 (*)

{
  // 會匹配所有路徑
  path: '*'
}
{
  // 會匹配以 `/user-` 開頭的任意路徑
  path: '/user-*'
}

含有通配符的路由應該放在最后。路由 { path: '*' } 通常用于客戶端 404 錯誤腔寡。
當使用一個通配符時焚鲜，$route.params 內會自動添加一個名為 pathMatch 參數(shù)。它包含了 URL 通過通配符被匹配的部分：

// 給出一個路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

編程式的導航

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

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

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

注意：如果提供了 path忿磅，params 會被忽略，上述例子中的 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

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

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

跟 router.push 很像吨些，唯一的不同就是，它不會向 history 添加新記錄炒辉，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄豪墅。

router.go(n)

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

命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些啡氢，特別是在鏈接一個路由状囱，或者是執(zhí)行一些跳轉的時候。你可以在創(chuàng)建 Router 實例的時候倘是，在 routes 配置中給某個路由設置名稱亭枷。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者