Vue 设置网页 title

96
作者 静候那一米阳光
2017.08.25 09:41 字数 44

Vue 设置网页 title

方案1

document.title = '标题内容'

方案2

vue-router-title

方案3

使用指令

1

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

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

2

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

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

3

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

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

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

Vue