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>