由于之前的 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.jsconst 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.jsrouter.beforeEach((to, from, next) => { document.title = to.meta.title next()})

此時，我們基本完美完成了功能需求，但是，還是有一點小瑕疵――如果 meta 中沒有定義 title 值，此時 title 值就變成了 undefined，撲街~

所以，我們需要設置默認的 title 值（一般可以是該項目的名稱），作為 title 值不存在時的備胎。修改后的代碼如下：

// router.jsconst 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 對標題的修改。

總結

以上所述是小編給大家介紹的Vue 中 title 的動態修改問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！