聊聊 Vue 中 title 的動態修改
由於之前的vue專案打包成果物一直是嵌入整合平臺中，所以一直沒有關注過專案的 title。直到最近，突然有個需求，要求點選按鈕在整合平臺外新開一個頁面，此時我才發現，原來我的專案的 title 一直是萬年不變的vue-project。理所應當的，這個問題被測試爸爸提了一個大大的缺陷。
犯了錯的我趕緊解決這個問題，但是經過一段時間的摸索，我卻發現，這一個小小的問題，卻有著很多不同的解法。
首先，毫無疑問的是，我們應該使用document.title方法通過 DOM 操作來修改 title 的值。此時，距離解決問題還差兩步：
- 如何傳遞 title？
- 何時修改 title？
ps：很多人提到過在微信或者一部分 IOS webview （下文一律以微信指代）中無法通過document.title方法修改 title 的值，這個問題的解決方案在文末的彩蛋中會提及。
title 的傳遞
接下來進入第一個重點：title 的傳遞。根據傳遞 title 值的方式，分為兩種方案：
- 全域性變數傳遞
- 路由傳遞
何為全域性變數傳遞？全域性變數傳遞指的是所有頁面維護同一個全域性變數，切換頁面對其重新賦值，最常見的方法是使用 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()
})到這裡為止，我們完美實現了需求，並且實現了該功能與業務程式碼的解耦。
廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com
彩蛋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對標題的修改。