vue3 页面动态标题

在Vue 3中，我们可以通过`<title>`标签动态设置页面的标题。首先，在`<template>`模板中添加一个`<title>`标签，如下所示：

<template>
  <div>
    <title>{{ pageTitle }}</title>
    <h1>{{ pageTitle }}</h1>
  </div>
</template>

然后，在`<script>`中定义`pageTitle`变量用于存储页面标题的值，并且可以根据需要进行动态更新。例如，我们可以在`mounted()`生命周期钩子函数中设置初始的页面标题，如下所示：

<script>
export default {
  data() {
    return {
      pageTitle: '初始标题'
    }
  },
  mounted() {
    document.title = this.pageTitle;
  }
}
</script>

在这个例子中，页面加载完毕后，`mounted()`函数会被调用，然后通过`document.title`修改文档的标题为`this.pageTitle`变量的值，即初始标题。

如果我们想要更新页面标题，可以通过方法来更新`pageTitle`的值，并且在更新后重新设置文档的标题。假设我们有一个按钮，点击该按钮后可以修改页面标题，可以在Vue组件中添加一个`<button>`元素，并且为它绑定一个点击事件，如下所示：

<template>
  <div>
    <title>{{ pageTitle }}</title>
    <h1>{{ pageTitle }}</h1>
    <button @click="updateTitle">更新标题</button>
  </div>
</template>

然后，在`methods`中定义`updateTitle`方法来更新`pageTitle`的值，并且重新设置文档的标题，如下所示：

<script>
export default {
  data() {
    return {
      pageTitle: '初始标题'
    }
  },
  mounted() {
    document.title = this.pageTitle;
  },
  methods: {
    updateTitle() {
      this.pageTitle = '新标题';
      document.title = this.pageTitle;
    }
  }
}
</script>

这样，当按钮被点击时，`updateTitle`方法会被调用，更新`pageTitle`的值为“新标题”，然后通过`document.title`设置文档的标题为更新后的值。这样就实现了动态修改页面标题的功能。