vue 动态改变title (详情)

最新推荐文章于 2024-03-12 17:32:31 发布

LQQ13520325893

最新推荐文章于 2024-03-12 17:32:31 发布

阅读量1.3k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/LQQ13520325893/article/details/88568157

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用用vue组件的方式实现如下：
title组件

<template>
  <h1 v-if="false"><slot>请输入标题内容</slot></h1>
</template>

<script>
export default {
  created () {
    this.updateTitle()
  },
  beforeUpdate () {
    this.updateTitle()
  },
  methods: {
    updateTitle () {
      let slots = this.$slots.default
      if (typeof slots === 'undefined' ||
        slots.length < 1 ||
        typeof slots[0].text !== 'string') return
      let {text} = slots[0]
      let {title} = document
      if (text !== title) document.title = text
    }
  }
}
</script>

需要更新标题(document.title)的页面或组件部分代码如下：

<template>
  <div>
    <v-title>需要显示的title</v-title>
    ...
  </div>
</template>
<script>
import VTitle from '...path/Title'
export default {
  components: {
    VTitle
  }
}
</script>