<address id="xpjh9"><listing id="xpjh9"><meter id="xpjh9"></meter></listing></address>

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
<noframes id="xpjh9">
<noframes id="xpjh9">

<address id="xpjh9"><address id="xpjh9"><listing id="xpjh9"></listing></address></address>
    <form id="xpjh9"></form><address id="xpjh9"><listing id="xpjh9"><menuitem id="xpjh9"></menuitem></listing></address>

      <noframes id="xpjh9">
      VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
      SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
      當前位置:
      首頁 > 網站開發 > JavaScript >
      • JavaScript教程之聊聊 Vue 中 title 的動態修改

      • 2019-06-17 14:50 來源:未知

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

      相關教程
      江苏快3 红河 | 那曲 | 章丘 | 定州 | 阳泉 | 资阳 | 新余 | 包头 | 海拉尔 | 澄迈 | 阜阳 | 海宁 | 莆田 | 泸州 | 广安 | 乐清 | 曲靖 | 靖江 | 阿勒泰 | 乐山 | 迁安市 | 东莞 | 阳春 | 佛山 | 秦皇岛 | 任丘 | 柳州 | 亳州 | 南京 | 安阳 | 台北 | 漳州 | 松原 | 株洲 | 马鞍山 | 贺州 | 贺州 | 湖北武汉 | 海安 | 日土 | 陕西西安 | 信阳 | 白城 | 伊犁 | 临沧 | 禹州 | 福建福州 | 垦利 | 石狮 | 承德 | 运城 | 大理 | 赣州 | 瓦房店 | 凉山 | 吐鲁番 | 鄂州 | 商丘 | 延安 | 长兴 | 汕头 | 六盘水 | 张掖 | 淮南 | 简阳 | 莆田 | 锡林郭勒 | 运城 | 商洛 | 芜湖 | 北海 | 焦作 | 单县 | 改则 | 山南 | 儋州 | 绍兴 | 汉中 | 阳春 | 海南海口 | 临汾 | 湘潭 | 泰兴 | 台州 | 铜陵 | 天长 | 包头 | 定安 | 邳州 | 葫芦岛 | 姜堰 | 临沂 | 安徽合肥 | 荆门 | 庄河 | 仙桃 | 伊春 | 青州 | 海门 | 湘西 | 大庆 | 醴陵 | 达州 | 襄阳 | 南充 | 莆田 | 果洛 | 威海 | 黄山 | 双鸭山 | 绍兴 | 曹县 | 吉林长春 |