vue2.0 下对网页标题(document.title)更新的一种实现思路

2024年3月26日 229次阅读 来源: ycloud

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>
    原文作者：ycloud
    原文地址: https://segmentfault.com/a/1190000007387556
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞