Vue秘籍：怎样动态修改页面 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");
页:
[1]