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

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

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

• 在电商网站中，展示商品详情时，标题应该是商品名称 - 商城名称 。
• 在后台管理系统中，切换不同的页面时，页签名称应随之变化。
• 在聊天应用中，当有新消息时，页签标题可以变成**（1）新消息 - ChatApp**，吸引用户注意。 那么，如何在 Vue 项目中实现动态修改 document.title 呢？本文将介绍三种实用方法 ，并结合代码示例，助你轻松实现！

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

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

示例代码

商品详情页

缺点 ：

• 适用于单个组件，但不适合全局管理标题。
• 如果页面复杂，需要在多个组件中重复写 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

{{ productName }}

修改标题

🚀 效果 ：

• 进入页面时，title 自动变为 “Vue 3 官方指南 - 我的商城” 。
• 点击修改标题 按钮后，title 动态变为 “Vue 3 深入解析 - 我的商城” 。 优点 ： ✅ 响应式title：当 title 变化时，浏览器 title 自动更新。 ✅ 可复用性高 ：useTitle 可以在任何组件中使用，无需手动 watch document.title。 ✅ Vue 3 组合式 API 友好 ，符合现代开发习惯。 缺点 ：
• 仅适用于 Vue 3，Vue 2 需要使用 watch 或 computed 进行手动监听。

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

💡 你的 Vue 项目中是如何管理title 的？你最喜欢哪种方式？欢迎留言讨论！ 🚀