怎么在Vue 中動(dòng)態(tài)修改title ?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
阿合奇網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,阿合奇網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為阿合奇上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的阿合奇做網(wǎng)站的公司定做!
title 的傳遞
接下來進(jìn)入第一個(gè)重點(diǎn):title 的傳遞。根據(jù)傳遞 title 值的方式,分為兩種方案:
1.全局變量傳遞
2.路由傳遞
何為全局變量傳遞?全局變量傳遞指的是所有頁(yè)面維護(hù)同一個(gè)全局變量,切換頁(yè)面對(duì)其重新賦值,最常見的方法是使用 Vuex,當(dāng)然,如果你要使用 this.$root 甚至喪心病狂地想要使用 provide/inject 一樣可以達(dá)到類似的效果。
路由傳遞的方法就比較容易理解了,即通過路由跳轉(zhuǎn)傳參傳遞 title 的值。由于業(yè)務(wù)邏輯中本身就包含大量的路由傳參,為了解耦方便后續(xù)維護(hù),推薦將 title 的值通過路由配置中的 meta 進(jì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) } ...
通過上面的兩種方法,可以順利傳遞 title 的值。
title 的修改時(shí)機(jī)
完成了 title 值的傳遞,接下來我們談?wù)労螘r(shí)該修改 title。
想到這個(gè)問題,大多數(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 秒以上才成功修改。通過這個(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 中沒有定義 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,你可以通過定義 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è)問題:在微信中無法通過 document.title
方法修改 title 的值。當(dāng)然,這個(gè)兼容性問題都能解決了,正常情況下的 title 修改當(dāng)然不在話下。
我們先來看看 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 事件中通過 title 的值初始化標(biāo)題,而后續(xù)的 title 修改,無法觸發(fā)標(biāo)題的修改。既然 onload 事件能夠通過 title 修改標(biāo)題,那么我創(chuàng)建一個(gè)空的 iframe 觸發(fā) onload 事件修改了標(biāo)題后就移除它。這種方式根據(jù) title 修改了標(biāo)題,并且沒有對(duì)頁(yè)面造成額外的影響。
眾所周知,vue-wechat-title
通過 v-wechat-title
指令來觸發(fā) title 的動(dòng)態(tài)修改,每當(dāng)指令的值修改后,觸發(fā) update 鉤子中的回調(diào)函數(shù)——setWechatTitle。該函數(shù)通過前面提到的兼容性處理,實(shí)現(xiàn)了document.title
對(duì)標(biāo)題的修改。
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,可以大大提升訪問速度和用戶體驗(yàn)。
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。
文章題目:怎么在Vue中動(dòng)態(tài)修改title
URL標(biāo)題:http://muchs.cn/article26/ihdjcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄、ChatGPT、服務(wù)器托管、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)