聊聊Vue 中 title 的动态修改问题

// router.js
const routes = [
 {
  path: '/',
  ...
  meta: {
   title: '首页'
  }
 }, {
  path: '/A',
  meta: {
   title: 'A模块'
  }
 }
]
// 业务模块，获取 title
...
beforeCreate () {
 console.log(this.$route.meta)
}
...

// 业务代码
mounted () {
 document.title = this.$route.meta.title
}

// 业务代码
beforeCreate () {
 document.title = this.$route.meta.title
}

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

// router.js
const defaultTitle = '默认 title'
router.beforeEach((to, from, next) => {
 document.title = to.meta.title "color: #ff0000">彩蛋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 的动态修改问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！