Vue项目中动态修改页面标题Title-CSDN博客

本文链接：https://blog.csdn.net/Zhao_0912/article/details/148743078

方法一：使用组件生命周期钩子

适用于单个组件内动态修改标题。

实现步骤：

在目标组件的生命周期钩子（如 mounted 或 created）中直接修改 document.title。
如果需要在组件销毁时恢复标题，可以在 beforeUnmount 钩子中处理。

<template>
  <div>
    <h1>页面内容</h1>
  </div>
</template>

<script>
export default {
  name: 'YourComponent',
  mounted() {
    document.title = '新页面标题'; // 设置标题
  },
  beforeUnmount() {
    document.title = '默认标题'; // 组件卸载时恢复标题（可选）
  }
}
</script>

优点：

简单直接，适合小型项目或单个页面需求。

缺点：

需要在每个组件中重复代码，维护成本较高。

方法二：使用 Vue Router 的导航守卫

适用于多页面应用，通过路由配置统一管理标题。

实现步骤：

在路由配置中为每个路由添加 meta 字段，指定标题。
在 router.beforeEach 导航守卫中动态设置标题。

// router.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { title: '首页' } // 设置路由标题
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于我们' }
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title; // 根据路由动态设置标题
  } else {
    document.title = '默认标题'; // 默认标题
  }
  next();
});

export default router;

优点：

集中管理标题，适合中大型项目。
路由切换时自动更新标题，无需手动干预。

缺点：

需要为每个路由配置 meta.title，增加路由配置复杂度。

方法三：使用 `vue-meta` 第三方库

适用于需要管理多种 <meta> 标签（如 SEO 优化）的场景。

实现步骤：

安装 vue-meta：
```
npm install vue-meta
```

在 main.js 或 main.ts 中注册插件：

import Vue from 'vue';
import VueMeta from 'vue-meta';
Vue.use(VueMeta);

在组件中使用 metaInfo 设置标题：

<script>
export default {
  name: 'YourComponent',
  metaInfo: {
    title: '页面标题' // 自动注入到 <title> 标签
  }
}
</script>

优点：

支持复杂的 <meta> 标签管理（如描述、关键词等）。
自动处理标题的更新和恢复，避免手动操作。

缺点：

需要额外安装依赖，适合中大型项目。

方法四：全局混入（Global Mixin）

适用于所有组件需要统一标题逻辑的场景。

实现步骤：

在入口文件中定义全局混入：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mixin({
  mounted() {
    if (this.$route.meta.title) {
      document.title = this.$route.meta.title;
    }
  }
});

app.mount('#app');

在路由配置中添加 meta.title（同方法二）。

优点：

所有组件自动继承标题逻辑，无需重复代码。

缺点：

全局混入可能影响性能，需谨慎使用。

总结与选择建议

方法	适用场景	优点	缺点
生命周期钩子	小型项目或单个页面	简单直接	重复代码多
Vue Router 守卫	多页面应用	集中管理	需配置路由 `meta`
vue-meta	SEO 优化或复杂 meta 管理	功能强大	需安装依赖
全局混入	全局统一标题逻辑	无需重复代码	可能影响性能