Vue3动态修改页面 Title

Vue秘籍：如何动态修改页面 Title（浏览器页签名称）？

在开发Vue项目时，我们经常需要根据不同的页面动态修改浏览器的页签标题（ title ），比如：

• 在电商网站中，展示商品详情时，标题应该是 商品名称 - 商城名称 。

• 在后台管理系统中，切换不同的页面时，页签名称应随之变化。

• 在聊天应用中，当有新消息时，页签标题可以变成**（1）新消息 - ChatApp**，吸引用户注意。

那么，如何在 Vue 项目中实现动态修改 document.title 呢？本文将介绍 三种实用方法 ，并结合代码示例，助你轻松实现！

---

方法一：在组件的 mounted 钩子中修改 title

最简单的方法是在 Vue 组件的 mounted 钩子中直接修改 document.title 。

示例代码

<template>
  <div>
    <h1>商品详情页</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: "Vue 3 官方指南"
    };
  },
  mounted() {
    document.title = `${this.productName} - 我的商城`;
  }
};
</script>

缺点 ：

• 适用于单个组件，但不适合全局管理标题。

• 如果页面复杂，需要在多个组件中重复写 document.title ，代码难以维护。

---

方法二：使用 Vue Router 监听路由变化，动态修改 title

如果你的项目是 多页面应用（SPA） ，通常会使用Vue Router来管理页面切换。在这种情况下，我们可以 在全局导航守卫中监听路由变化 ，并根据 meta 字段动态修改 title 。

步骤 1：在路由中定义 meta.title

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import Product from "@/views/Product.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: { title: "首页 - 我的商城" }
  },
  {
    path: "/product/:id",
    name: "Product",
    component: Product,
    meta: { title: "商品详情 - 我的商城" }
  }
];

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

export default router;

步骤 2：在 router.beforeEach 中监听并修改 document.title

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

const app = createApp(App);

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

app.use(router).mount("#app");

🚀 效果 ：

• 当用户切换到 Home.vue 时，页面 title 自动变为 “首页 - 我的商城” 。

• 当用户进入 Product.vue 时， title 变为 “商品详情 - 我的商城” 。

优点 ：
✅ 适用于多页面应用（SPA），全局管理 title ，无需在每个组件手动修改。
✅ 遵循 Vue Router 逻辑，代码更清晰、易维护。

缺点 ：

• 只能基于 meta.title 修改 title ，如果 title 需要动态数据（如商品名称），仍需手动处理。

---

方法三：封装全局 useTitle 组合式 API（Vue 3 推荐）

在 Vue 3 组合式API中，我们可以封装一个 useTitle 函数，使 title 绑定到一个 ref 变量，从而在任何组件中轻松修改。

步骤 1：创建 useTitle 组合式 API

// composables/useTitle.js
import { watchEffect } from "vue";

export function useTitle(newTitle) {
  watchEffect(() => {
    document.title = newTitle.value;
  });
}

步骤 2：在组件中使用 useTitle

<template>
  <div>
    <h1>{{ productName }}</h1>
    <button @click="changeTitle">修改标题</button>
  </div>
</template>

<script>
import { ref } from "vue";
import { useTitle } from "@/composables/useTitle";

export default {
  setup() {
    const productName = ref("Vue 3 官方指南");
    const title = ref(`${productName.value} - 我的商城`);

    useTitle(title); // 绑定 title 到页面

    const changeTitle = () => {
      productName.value = "Vue 3 深入解析";
      title.value = `${productName.value} - 我的商城`;
    };

    return { productName, changeTitle };
  }
};
</script>

🚀 效果 ：

• 进入页面时， title 自动变为 “Vue 3 官方指南 - 我的商城” 。

• 点击 修改标题 按钮后， title 动态变为 “Vue 3 深入解析 - 我的商城” 。

优点 ：
✅ 响应式 title ：当 title 变化时，浏览器 title 自动更新。
✅ 可复用性高 ： useTitle 可以在任何组件中使用，无需手动 watch document.title 。
✅ Vue 3 组合式 API 友好 ，符合现代开发习惯。

缺点 ：

• 仅适用于 Vue 3，Vue 2 需要使用 watch 或 computed 进行手动监听。

---

总结：哪种方法最适合你？

方法	适用场景	代码复杂度	推荐指数
mounted 直接修改 title	适用于简单单页应用	⭐	⭐⭐
Vue Router meta.title	适用于 Vue Router 多页面应用	⭐⭐⭐	⭐⭐⭐⭐
useTitle 组合式 API	适用于 Vue 3 组件内动态修改 title	⭐⭐⭐	⭐⭐⭐⭐⭐

如果你只是需要在单个页面修改 title ， 方法一（ mounted ）足够。
如果你在Vue Router 项目 中管理 title ，建议使用 方法二（ meta.title ） 。
如果你想要 响应式 title 绑定 ，并希望代码更清晰，**方法三（ useTitle 组合式 API）**是最佳选择！