# 使用導航守衛 ## 需求 ### 我們來考慮一個需求: 在一個SPA應用中, 如何改變網頁的標題呢? 網頁標題是通過`<title>`來顯示的, 但是SPA只有一個固定的`HTML`, 切換不同的頁面時, 標題并不會改變. 但是我們可以通過`JavaScript`來修改<title>的內容.`window.document.title = '新的標題'.` 那么在Vue項目中, 在哪里修改? 什么時候修改比較合適呢? ## 普通的修改方式: 我們比較容易想到的修改標題的位置是每一個路由對應的組件.vue文件中. 通過`mounted`聲明周期函數, 執行對應的代碼進行修改即可. 但是當頁面比較多時, 這種方式不容易維護(因為需要在多個頁面執行類似的代碼). 有沒有更好的辦法呢? 使用導航守衛即可. ## 什么是導航守衛? `vue-router`提供的導航守衛主要用來監聽路由的進入和離開的。 `vue-router`提供了`beforeEach`和`afterEach`的鉤子函數, 它們會在路由即將改變前和改變后觸發. 導航鉤子的三個參數解析: >[success] to: 即將要進入的目標的路由對象. > from: 當前導航即將要離開的路由對象. > next: 調用該方法后, 才能進入下一個鉤子. ## 嘗試使用 >[success] 利用beforeEach來完成標題的修改. > 首先, 我們可以在鉤子當中定義一些標題, 可以利用meta來定義 其次, 利用導航守衛,修改我們的標題.   ## 導航守衛補充 路由獨享的守衛. 組件內的守衛. 這兩項用的不是很多，可以查看官網去學習。后期項目中如果用到我們再仔細講解。