Vue：如何修改浏览器页面标签名称

在 Vue 项目中，浏览器标签页的标题（即title）默认由 HTML 模板或打包工具（如 Vue CLI）生成。那么如何在Vue项目中，修改成下图所示的标题呢？

方法一：修改public/index.html文件

• 修改标题内容
• 修改图标地址

方法二：使用 document.title 直接修改

在 Vue 组件的生命周期钩子（如 mounted）中直接修改 document.title。

export default {
  name: 'HomePage',
  mounted() {
    document.title = '自定义页面标题';
  }
}
 

方法三：结合 Vue Router 动态设置标题

如果项目使用 Vue Router，可以在路由配置的 meta 字段中添加标题信息，并通过全局前置守卫动态修改。

// router/index.js
const routes = [
  {
    path: '/',
    name: 'Home',
    ***ponent: Home,
    meta: { title: '首页' }
  }
];

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
 

通过以上方法，可以灵活控制浏览器标签页的标题，提升用户体验。