怎么在Vue 中動(dòng)態(tài)修改title

怎么在Vue 中動(dòng)態(tài)修改title ？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

title 的傳遞

接下來(lái)進(jìn)入第一個(gè)重點(diǎn)：title 的傳遞。根據(jù)傳遞 title 值的方式，分為兩種方案：

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

何為全局變量傳遞？全局變量傳遞指的是所有頁(yè)面維護(hù)同一個(gè)全局變量，切換頁(yè)面對(duì)其重新賦值，最常見的方法是使用 Vuex，當(dāng)然，如果你要使用 this.$root 甚至喪心病狂地想要使用 provide/inject 一樣可以達(dá)到類似的效果。

路由傳遞的方法就比較容易理解了，即通過(guò)路由跳轉(zhuǎn)傳參傳遞 title 的值。由于業(yè)務(wù)邏輯中本身就包含大量的路由傳參，為了解耦方便后續(xù)維護(hù)，推薦將 title 的值通過(guò)路由配置中的 meta 進(jìn)行傳遞。

之后，通過(guò)訪問(wèn)當(dāng)前路由對(duì)象（$route）的 meta 屬性即可獲取到 title 值。

// router.js
const routes = [
 {
  path: '/',
  ...
  meta: {
   title: '首頁(yè)'
  }
 }, {
  path: '/A',
  meta: {
   title: 'A模塊'
  }
 }
]
// 業(yè)務(wù)模塊，獲取 title
...
beforeCreate () {
 console.log(this.$route.meta)
}
...

通過(guò)上面的兩種方法，可以順利傳遞 title 的值。

title 的修改時(shí)機(jī)

完成了 title 值的傳遞，接下來(lái)我們談?wù)労螘r(shí)該修改 title。

想到這個(gè)問(wèn)題，大多數(shù)人第一個(gè)想到的應(yīng)該就是在生命周期鉤子中修改 title。

生命周期鉤子

一般情況下，我們?cè)?mounted 生命周期鉤子中進(jìn)行初始化請(qǐng)求，所以慣性思維之下，我在 mounted 中進(jìn)行了 title 的修改。

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

結(jié)果，效果不佳，標(biāo)簽頁(yè)的 title 延遲 1 秒以上才成功修改。通過(guò)這個(gè)延遲可以發(fā)現(xiàn)，顯然，我們的代碼執(zhí)行地太晚了！

回憶了一下 Vue 源碼中初始化相關(guān)的代碼細(xì)節(jié)，我們可以發(fā)現(xiàn)，我們甚至在 beforeCreate 鉤子中就可以進(jìn)行 title 的修改。

改動(dòng)后的代碼如下：

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

可以發(fā)現(xiàn)，修改后的代碼效果明顯好了許多，延遲感雖然還有，但是已經(jīng)不太明顯。

路由守衛(wèi)

比起在生命周期鉤子中修改 title 值，在路由跳轉(zhuǎn)時(shí)利用路由守衛(wèi)完成 title 的修改，豈不美哉？畢竟路由跳轉(zhuǎn)發(fā)生在生命周期函數(shù)執(zhí)行之前，使用路由守衛(wèi)修改 title 值可以明顯降低 title 修改的延時(shí)。

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

此時(shí)，我們基本完美完成了功能需求，但是，還是有一點(diǎn)小瑕疵——如果 meta 中沒(méi)有定義 title 值，此時(shí) title 值就變成了 undefined，撲街~

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

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

到這里為止，我們完美實(shí)現(xiàn)了需求，并且實(shí)現(xiàn)了該功能與業(yè)務(wù)代碼的解耦。

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

vue-meta 插件在安裝時(shí)，像 Vuex 類似，注入了全局狀態(tài)——metaInfo，你可以通過(guò)定義 metaInfo 對(duì)象中的 title 屬性，實(shí)現(xiàn) title 的動(dòng)態(tài)修改。

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

在搜索相關(guān)資料的時(shí)候，vue-wechat-title 這個(gè)包的出現(xiàn)頻率出乎意料的高，這個(gè)包主要解決了前面提到的那個(gè)問(wèn)題：在微信中無(wú)法通過(guò) document.title 方法修改 title 的值。當(dāng)然，這個(gè)兼容性問(wèn)題都能解決了，正常情況下的 title 修改當(dāng)然不在話下。

我們先來(lái)看看 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)) {
    // 創(chuàng)建空的 iframe，觸發(fā) onload 事件
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // 替換成站標(biāo)favicon路徑或者任意存在的較小的圖片即可
    iframe.setAttribute('src', img || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
    // onload 回調(diào)函數(shù)
    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 鉤子，調(diào)用 title 修改函數(shù)
   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 事件中通過(guò) title 的值初始化標(biāo)題，而后續(xù)的 title 修改，無(wú)法觸發(fā)標(biāo)題的修改。既然 onload 事件能夠通過(guò) title 修改標(biāo)題，那么我創(chuàng)建一個(gè)空的 iframe 觸發(fā) onload 事件修改了標(biāo)題后就移除它。這種方式根據(jù) title 修改了標(biāo)題，并且沒(méi)有對(duì)頁(yè)面造成額外的影響。

眾所周知，vue-wechat-title 通過(guò) v-wechat-title 指令來(lái)觸發(fā) title 的動(dòng)態(tài)修改，每當(dāng)指令的值修改后，觸發(fā) update 鉤子中的回調(diào)函數(shù)——setWechatTitle。該函數(shù)通過(guò)前面提到的兼容性處理，實(shí)現(xiàn)了document.title 對(duì)標(biāo)題的修改。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。