聊聊 Vue 中 title 的動態修改

格子熊發表於2019-06-11
Vue

由於之前的 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 對標題的修改。

相關文章