1. 程式人生 > >使用vue-router設定每個頁面的title

使用vue-router設定每個頁面的title

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'EntryConfirmation',
      meta: { title: "到崗候選人名單確認" },
      component: EntryConfirmation
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {//如果設定標題,攔截後設置標題
    document.title = to.meta.title
  }
  next()
})

export default
router

每個守衛方法接收三個引數:

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。

這裡寫圖片描述

這裡寫圖片描述