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>
阅读 30k

推荐阅读
ycloud
用户专栏

web前端

0 人关注
2 篇文章
专栏主页