聊聊 Vue 中 title 的動態修改

因爲以前的 Vue 項目打包成果物一直是嵌入集成平臺中，因此一直沒有關注過項目的 title。直到最近，忽然有個需求，要求點擊按鈕在集成平臺外新開一個頁面，此時我才發現，原來個人項目的 title 一直是萬年不變的 vue-project。理所應當的，這個問題被測試爸爸提了一個大大的缺陷。

犯了錯的我趕忙解決這個問題，可是通過一段時間的摸索，我卻發現，這一個小小的問題，卻有着不少不一樣的解法。

首先，毫無疑問的是，咱們應該使用 document.title 方法經過 DOM 操做來修改 title 的值。此時，距離解決問題還差兩步：

1. 如何傳遞 title？
2. 什麼時候修改 title？

ps：不少人提到過在微信或者一部分 IOS webview （下文一概以微信指代）中沒法經過 document.title 方法修改 title 的值，這個問題的解決方案在文末的彩蛋中會說起。

title 的傳遞

接下來進入第一個重點：title 的傳遞。根據傳遞 title 值的方式，分爲兩種方案：

1. 全局變量傳遞
2. 路由傳遞

何爲全局變量傳遞？全局變量傳遞指的是全部頁面維護同一個全局變量，切換頁面對其從新賦值，最多見的方法是使用 Vuex，固然，若是你要使用 this.$root 甚至喪心病狂地想要使用 provide/inject 同樣能夠達到相似的效果。

路由傳遞的方法就比較容易理解了，即經過路由跳轉傳參傳遞 title 的值。因爲業務邏輯中自己就包含大量的路由傳參，爲了解耦方便後續維護，推薦將 title 的值經過路由配置中的 meta 進行傳遞。

以後，經過訪問當前路由對象（$route）的 meta 屬性便可獲取到 title 值。

// router.js
const routes = [
  {
    path: '/',
    ...
    meta: {
      title: '首頁'
    }
  }, {
    path: '/A',
    meta: {
      title: 'A模塊'
    }
  }
]

// 業務模塊，獲取 title
...
beforeCreate () {
  console.log(this.$route.meta)
}
...

經過上面的兩種方法，能夠順利傳遞 title 的值。

title 的修改時機

完成了 title 值的傳遞，接下來咱們談談什麼時候該修改 title。

想到這個問題，大多數人第一個想到的應該就是在生命週期鉤子中修改 title。

生命週期鉤子

通常狀況下，咱們在 mounted 生命週期鉤子中進行初始化請求，因此慣性思惟之下，我在 mounted 中進行了 title 的修改。

// 業務代碼
mounted () {
  document.title = this.$route.meta.title
}

結果，效果不佳，標籤頁的 title 延遲 1 秒以上才成功修改。經過這個延遲能夠發現，顯然，咱們的代碼執行地太晚了！

回憶了一下 Vue 源碼中初始化相關的代碼細節，咱們能夠發現，咱們甚至在 beforeCreate 鉤子中就能夠進行 title 的修改。

改動後的代碼以下：

// 業務代碼
beforeCreate () {
  document.title = this.$route.meta.title
}

能夠發現，修改後的代碼效果明顯好了許多，延遲感雖然還有，可是已經不太明顯。

路由守衛

比起在生命週期鉤子中修改 title 值，在路由跳轉時利用路由守衛完成 title 的修改，豈不美哉？畢竟路由跳轉發生在生命週期函數執行以前，使用路由守衛修改 title 值能夠明顯下降 title 修改的延時。

// router.js
router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

此時，咱們基本完美完成了功能需求，可是，仍是有一點小瑕疵——若是 meta 中沒有定義 title 值，此時 title 值就變成了 undefined，撲街~

因此，咱們須要設置默認的 title 值（通常能夠是該項目的名稱），做爲 title 值不存在時的備胎。修改後的代碼以下：

// router.js
const defaultTitle = '默認 title'
router.beforeEach((to, from, next) => {
  document.title = to.meta.title ? to.meta.title : defaultTitle
  next()
})

到這裏爲止，咱們完美實現了需求，而且實現了該功能與業務代碼的解耦。

彩蛋1：使用 vue-meta 管理 title

vue-meta 插件在安裝時，像 Vuex 相似，注入了全局狀態——metaInfo，你能夠經過定義 metaInfo 對象中的 title 屬性，實現 title 的動態修改。

彩蛋2：vue-wechat-title 源碼解析

在搜索相關資料的時候，vue-wechat-title 這個包的出現頻率出乎意料的高，這個包主要解決了前面提到的那個問題：在微信中沒法經過 document.title 方法修改 title 的值。固然，這個兼容性問題都能解決了，正常狀況下的 title 修改固然不在話下。

咱們先來看看 vue-wechat-title 的源碼：

// vue-wechat-title 源碼
(function () {
  // 插件安裝鉤子
  function install (Vue) {
    var setWechatTitle = function (title, img) {
      if (title === undefined || window.document.title === title) {
        return
      }
      // 修改 title
      document.title = title
      var mobile = navigator.userAgent.toLowerCase()
      // 兼容性判斷
      if (/iphone|ipad|ipod/.test(mobile)) {
        // 建立空的 iframe，觸發 onload 事件
        var iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        // 替換成站標favicon路徑或者任意存在的較小的圖片便可
        iframe.setAttribute('src', img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
        // onload 回調函數
        var iframeCallback = function () {
          setTimeout(function () {
            // 卸磨殺驢
            iframe.removeEventListener('load', iframeCallback)
            document.body.removeChild(iframe)
          }, 0)
        }
        // 定義事件
        iframe.addEventListener('load', iframeCallback)
        document.body.appendChild(iframe)
      }
    }
    // 定義全局指令，
    Vue.directive('wechat-title', function (el, binding) {
      // update 鉤子，調用 title 修改函數
      setWechatTitle(binding.value, el.getAttribute('img-set') || null)
    })
  }

  if (typeof exports === 'object') {
    module.exports = install
  } else if (typeof define === 'function' && define.amd) {
    define([], function () {
      return install
    })
  } else if (window.Vue) {
    Vue.use(install)
  }
})()

因爲微信瀏覽器只在onload 事件中經過 title 的值初始化標題，然後續的 title 修改，沒法觸發標題的修改。既然 onload 事件可以經過 title 修改標題，那麼我建立一個空的 iframe 觸發 onload 事件修改了標題後就移除它。這種方式根據 title 修改了標題，而且沒有對頁面形成額外的影響。

衆所周知，vue-wechat-title 經過 v-wechat-title 指令來觸發 title 的動態修改，每當指令的值修改後，觸發 update 鉤子中的回調函數——setWechatTitle。該函數經過前面提到的兼容性處理，實現了document.title 對標題的修改。