脚本宝典收集整理的这篇文章主要介绍了vue2.0 下对网页标题(document.title)更新的一种实现思路，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

2017-05-22 更新：更优雅的实现方式 组件化的思想实现 vue2.0 下对网页标题(document.title)的更新

在这个mvvm流行的今天，大家为了体验也是很拼的。

大部分mvvm都是单页面应用，在路由切换时不像传统页面一样重新下载整个html文件，这样就无法对页面标题进行更新。造成整个应用内页面标题和实际内容不相符，虽说不影响使用，但强迫症患者还是忍受不了。

因为用到vue-router之前一直想通过路由切换实现，但是搜索很久也没找到合适的方法。

今天再次查看vue的文档，突然想到可以通过自定义指令来实现。

具体思路如下，很简单只需要两步就可实现：

1.首页我们注册一个全局指令

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.innerText
    el.remove()
  }
})

2.在需要更改页面标题的组件内调用我们刚注册的指令

<div v-title>标题内容</div>

当当当，就这样喽。

这里是用innerText来实现标题更新，如果你嫌弃这里多了一个无用div，还可以通过指令绑定值的方式实现

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = binding.value
  }
})

<div v-title="'标题内容'">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>

因为指令函数能够接受所有合法类型的 Javascript 表达式，所以这里你要注意一下要对绑定的值加上引号。

什么？不想多一个无用的div，又看不惯多出的引号，稍稍变通一下就可以了

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

<div v-title data-title="标题内容">
……组件内的内容
这里的div可以是你组件内的任何标签
</div>

脚本宝典总结

以上是脚本宝典为你收集整理的vue2.0 下对网页标题(document.title)更新的一种实现思路全部内容，希望文章能够帮你解决vue2.0 下对网页标题(document.title)更新的一种实现思路所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。