vue页面标题如何修改

在Vue.js中，页面标题（通常显示在浏览器标签栏上）通常是通过HTML `<title>` 标签设置的。如果你使用的是单文件组件（Single File Component, SFC），例如`.vue` 文件，你可以在组件的模板部分设置它，或者在`<script>`部分的`beforeCreate`钩子或`mounted`生命周期钩子里动态改变它。

这里有一个简单的例子：

<template>
  <div id="app">
    <!-- 其他内容 -->
    <title>这是当前的页面标题</title>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    document.title = '这是动态修改的页面标题';
  },
  data() {
    return {};
  }
}
</script>

在这个例子中，`beforeCreate`钩子会在实例创建之前运行，所以在这个时候设置`document.title`，页面加载完成后会立即看到新的标题。

如果你在路由切换时想更新标题，可以利用Vue Router提供的导航守卫，比如`beforeEach`钩子：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const setTitle = () => {
      document.title = `${route.name} - 页面标题`;
    };
    
    onMounted(setTitle); // 或者放在其他合适的生命周期钩子里

    return { setTitle };
  }
};

这样每当路由改变时，`setTitle`函数会被自动调用，更新页面标题。