vue3 修改当前页面title

Vue.js是一种流行的前端框架，可以实现快速构建单页面应用程序。在Vue 2中，可以通过直接修改document.title属性来更改页面标题。但是，在Vue 3中，这种方法会导致警告，因为一些原因。要以更好的方式修改当前页面的标题，可以使用Vue 3提供的新的全局API方法。这个方法是用于修改页面标题的，它名为 `onMounted`。

`onMounted` 方法用于在Vue实例挂载后执行一个函数。可以在这个函数中修改当前页面的标题。这可以通过访问 `document` 全局对象并设置 `title` 属性来实现。

具体实现如下：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      document.title = '新的页面标题'
    })
  }
}

首先，我们必须从Vue中导入 `onMounted` 方法。该方法被用作Vue 3中的新全局API，用于在组件实例挂载之后执行函数。然后，我们在 `setup` 方法中使用 `onMounted` ，并传一个函数作为参数。这个函数将在组件挂载后执行。在这个函数内部，我们可以访问全局 `document` 对象并设置 `title` 属性来修改当前页面的标题。在这个例子中，我们设置 `title` 属性为 "新的页面标题"。

这是一个简单的Vue 3例子，使用 `onMounted` 方法修改当前页面的标题。通过这种方式，我们可以避免在Vue 3中出现的一些问题，以及更好地管理Vue组件中的代码。