入門Vue Router，看完這篇就夠了

vue Router 是vue.js的官方路由管理器，能夠經過hash匹配組件並渲染而不刷新頁面

vue Router的兩種路由模式

hash模式

• 改變#後面的hash值，會觸發onhashchange事件，在該事件裏對頁面進行局部操做
• hash的變化會被瀏覽器記錄（歷史訪問棧）下來，能夠前進、後退、刷新而不向服務器發送請求
• 經過匹配#後面的hash，與vueRouter配置文件裏的path對應作路由跳轉

history模式

• 基於瀏覽器history的pushState()、replaceState()、popState()來實現，能夠讀取、修改瀏覽器歷史記錄棧
• 能夠前進、後退不發往服務器發送請求，但刷新會向服務器發送請求
• 若匹配不到資源，則返回404，所以須要後臺支持，重定向到根目錄主頁

動態路由匹配

經過不一樣參數，來匹配到同一組件

好比咱們有一個通用的文章詳情頁，須要經過不一樣的文章id來顯示不一樣的內容，則咱們能夠經過 article:id 來完成

$route.params

一個 key/value 對象，包含了動態片斷和全匹配片斷

article/:id 轉換爲> $route.params.id

article/123 => $route.params.id = 123

$route.query

一個 key/value 對象，表示 URL 查詢參數

article?id='123' => $route.params.id = '123'

導航守衛

注意！改變路由的參數不會觸發進入/離開的導航守衛

• 使用watch監聽$route
• 使用組件內守衛beforeRouteUpdate來監聽變化

全局守衛

全局前置守衛< beforeEach >

當導航被觸發時會被調用，守衛是異步解析執行的，當守衛未resolved以前，導航一直處於等待

=> code <=
router.beforeEach((to, from, next) => {
    ······
})
複製代碼

• 能夠在此階段作權限校驗

全局解析守衛< beforeResolve >

當導航被確認同時組件內守衛和異步守衛都解析後觸發

全局後置鉤子< afterEach >

導航跳轉完成後被觸發

router.afterEach((to, from) => {
    ······
})
複製代碼

路由獨享守衛

beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
複製代碼

組件內守衛

僅限在組件內定義使用

beforeRouteEnter

beforeRouteEnter (to, from, next) {
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
}
複製代碼

• 在渲染該組件對應路由被確認前調用
• 在此階段沒法訪問this，由於守衛在導航確認前被調用，此時組件還未被建立
• 能夠經過給next設置回調來訪問this

beforeRouteEnter (to, from, next) {
    next(vm => {
        經過vm訪問組件實例
    })
}
複製代碼

beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // 能夠訪問this
    this.name = to.params.name // 能夠獲取路由參數
    next()
}
複製代碼

• 當導航路由發生改變，組件被複用時觸發
• 複用組件時沒法觸發進入、離開的導航守衛
• 給路由傳參會觸發此守衛

beforeRouteLeave

beforeRouteLeave (to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
        next(false) // 可經過此方法取消導航
    }
}
複製代碼

• 當離開此導航路由時觸發
• 通常用於禁止用戶還未保存修改前離開