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）**是最佳选择！
💡 你的 Vue 项目中是如何管理 title 的？你最喜欢哪种方式？欢迎留言讨论！ 🚀