VueRouter

當 <router-link> 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active 。

默認 hash 模式：使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。
history 模式：充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面，此模式若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面。

動態路由匹配
{path: '/user/:id', component: User}
user/abc user/123 都將映射到相同的路由
this.$route.params.id（template 中 $route.params.id）

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

嵌套路由
User 須要 <router-view></router-view>
children 路徑不能以 "/" 開頭
{
  path: '/user',
  component: User,
  children: [
    {
      // 當 /user/profile 匹配成功，
      // UserProfile 會被渲染在 User 的 <router-view> 中
      path: 'profile',
      component: UserProfile
    },
    {
      // 當 /user/posts 匹配成功
      // UserPosts 會被渲染在 User 的 <router-view> 中
      path: 'posts',
      component: UserPosts
    }
  ]
}

編程式的導航
<router-link :to="..."> 等同於調用 router.push(...)
this.$router.push(location, onComplete?, onAbort?)
this.$router.push('home')
this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.push({ name: 'user', params: { userId: '123' }})

location 若是提供了 path，params 會被忽略，解決辦法：{path: `register/${id}`}

onComplete 和 onAbort 兩個回調用於導航成功完成（在全部的異步鉤子被解析以後）或終止（導航到相同的路由、或在當前導航完成以前導航到另外一個不一樣的路由）的時候進行相應的調用

<router-link :to="..." replace> 等同於調用 router.replace(...)，和 router.push() 惟一的不一樣就是，它不會向 history 添加新記錄，而是替換掉當前的 history 記錄

router.go(n) 這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)。


命名視圖
<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

{
  path: '/',
  components: {
    default: Foo,
    a: Bar,
    b: Baz
  }
}


重定向和別名
{ path: '/a', redirect: '/b' }
{ path: '/a', redirect: { name: 'foo' }}
{ path: '/a', redirect: to => {
  // 方法接收 目標路由 做爲參數
  // return 重定向的 字符串路徑/路徑對象
}}

{ path: '/a', component: A, alias: '/b' }


導航守衛
全局前置守衛
router.beforeEach((to, from, next) => {
  // to: Route: 即將要進入的目標 路由對象
  // from: Route: 當前導航正要離開的路由
  // next: Function: 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
  // some code
  next()
})

全局後置鉤子
router.afterEach((to, from) => {
  // ...
})

路由獨享的守衛
{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {/* */}
}

組件內的守衛
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 【不能】獲取組件實例 `this`，不過，你能夠經過傳一個回調給 next來訪問組件實例
    next(vm => {
      // 經過 `vm` 訪問組件實例
    })
    // 由於當守衛執行前，組件實例還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
  }
}

路由元信息
{
  path: 'bar',
  component: Bar,
  meta: { requiresAuth: true, title: 'BAR' }
}
遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

滾動行爲
scrollBehavior 只在支持 history.pushState 的瀏覽器中可用。
new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // savedPosition 當且僅當 popstate 導航 (經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用。
    // return 指望滾動到哪一個的位置
  }
})


路由懶加載
const Foo = () => import('./Foo.vue')

https://router.vuejs.org/zh/