Vue-cli

是快速構建單頁應用的腳手架，單頁所以只有一個index.html入口，只有一個app例項。
但是我們做的專案中，每個頁面的標題描述是不同的，又要改變title，所以這裡就需要用到導航守衛了

Vuecli搭建之類的這裡就不詳述了…
##導航守衛：
正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全域性的, 單個路由獨享的, 或者元件級的。
記住引數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 物件來應對這些變化，或使用 beforeRouteUpdate的元件內守衛，裡面的引數之類的後面會寫到。

進入正題

方法一

接下來開始修改title

1：先給title加上一個id【如上一張圖片中的title】，後面需要用到這個id來指定這個標籤，通過innerHTML來更改內容。

<title id="titleId">test</title>

2：進入router.js中，這裡腳手架搭建的時候我就選中了預設安裝router,有些同學可能是直接npm安裝的，不過無大礙。

這裡我們直接在路由配置上直接定義 beforeEnter 守衛，直接通過原生js獲取到id的title標籤改變裡面的內容。
每個守衛方法接收三個引數：

• to: Route: 即將要進入的目標 路由物件
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是使用者手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置物件，且允許設定諸如 replace: true、name: ‘home’ 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router.onError() 註冊過的回撥。

確保要呼叫 next 方法，否則鉤子就不會被 resolved。

導航守衛還可以用作路由攔截等等操作，後面會發布。

方法二

routes: [
    {          /* （首頁）預設路由地址 */
      path: '/',
      name: 'login',
      component: login,
      meta: {
        title: '首頁入口'
      }
    },
    {         
      path: '/apply',
      name: 'apply',
      component: apply,
      meta: {
        title: '申請'
      }
    },
    { /* Not Found 路由，必須是最後一個路由 */
      path: '*',
      component: NotFound,
      meta: {
        title: '找不到頁面'
      }
    }
  ]

最後在遍歷

router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})