---

為什麼要使用導航守衛？

我們來考慮一個需求:在一個SPA應用中,如何改變網頁的標題呢?
網頁標題是通過<title> 來顯示的,但是SPA只有一個固定的HTML,切換不同的頁面時,標題並不會改變;但是我們可以通過JavaScript來修改<title>的內容 window.document.title = ‘新的標題’;那麼在Vue專案中,在哪裡修改呢?什麼時候修改比較合適呢?
普通的修改方式:

• 我們比較容易修改標題的位置是每一個路由對應的元件.vue檔案中;
• 通過created宣告周期函式,執行對應的程式碼進行修改即可;
  如圖所示:
  

但是每一頁都這樣建立會顯得比較冗餘,優化方案: 可以使用全域性導航守衛

全域性守衛

什麼是導航守衛?

vue-router 提供了導航守衛;主要用來監聽路由的進入和離開的; vue-router 提供了前置鉤子beforeEach 和後置鉤子 afterEach 的鉤子函式,他們會在路由即將被改變前和改變後觸發.
上例可以使用beforeEach來完成標題的修改.
首先,我們可以在鉤子當中定義一些標題,可以利用meta(後設資料)來定義; 其次,利用導航守衛,修改我們的標題;如圖所示:

beforeEach導航鉤子的單個引數解析:

• to: 即將要進入的目標的路由物件
• from: 當前導航即將要離開的路由物件
• next: 呼叫該方法後,才能進入下一個鉤子

後置鉤子afterEach,不需要主動呼叫next()函式
Vue-router文件

路由獨享守衛

你可以在路由配置上直接定義 beforeEnter 守衛：

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

這些守衛與全域性前置守衛的方法引數是一樣的。

路由獨享守衛

在路由元件內直接定義以下路由導航守衛：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當守衛執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
  }
}

路由獨享守衛