路由導航守衛
1、爲什麼使用導航守衛？
我們來考慮一個需求：在一個SPA應用中，如何改變網頁的標題呢？
網頁標題是通過<title>來顯示的，但是SPA只有一個固定的HTML，切換不同的頁面時，標題並不會改變。
但是我們可以通過JavaScript來修改<title>的內容：window.document.title = '新的標題'。
那麼在Vue項目中，在哪裏修改? 什麼時候修改比較合適呢？
2、普通的修改方式：
我們比較容易想到的修改標題的位置是每一個路由對應的組件.vue文件中。
通過created或mounted生命週期函數，執行對應的代碼進行修改即可。
但是當頁面比較多時，這種方式不容易維護(因爲需要在多個頁面執行類似的代碼)。
有沒有更好的辦法呢？
使用導航守衛即可。
3、什麼是導航守衛？
vue-router提供的導航守衛主要用來監聽路由的進入和離開的；
vue-router提供了beforeEach和afterEach鉤子函數，它們會在路由即將改變前和改變後觸發。
說明：鉤子函數（hook），可以理解爲回調函數的意思。
我們可以利用beforeEach來完成標題的修改：
首先，我們可以在鉤子當中定義一些標題，可以利用meta來定義（meta指元屬性，元數據，定義數據的數據）；
其次，利用導航守衛，修改我們的標題。
說明：導航鉤子的三個參數解析：
to：即將要進入的目標的路由對象；
from：當前導航即將要離開的路由對象；
next：調用該方法後，才能進入下一個鉤子。
但是注意，如果是嵌套路由的切換跳轉，meta爲空，會出現無法獲取title的情況：
我們可以打印to來觀察一下：
所以使用matched，就能確保不會爲空：
4、導航守衛補充
補充一：如果是後置鉤子，也就是afterEach，不需要主動調用next()函數；
補充二：上面我們使用的導航守衛，被稱之爲全局守衛。
守衛還有其他兩種類型：
路由獨享的守衛；
組件內的守衛。
可以查看官網進行學習：