前言

在開發(fā) Vue 項(xiàng)目時(shí)，我們經(jīng)常需要根據(jù)不同的頁面動(dòng)態(tài)修改瀏覽器的頁簽標(biāo)題（title），比如：

• 在電商網(wǎng)站中，展示商品詳情時(shí)，標(biāo)題應(yīng)該是商品名稱 - 商城名稱。
• 在后臺管理系統(tǒng)中，切換不同的頁面時(shí)，頁簽名稱應(yīng)隨之變化。
• 在聊天應(yīng)用中，當(dāng)有新消息時(shí)，頁簽標(biāo)題可以變成**（1）新消息 - ChatApp**，吸引用戶注意。

那么，如何在 Vue 項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)修改 document.title 呢？本文將介紹三種實(shí)用方法，并結(jié)合代碼示例，助你輕松實(shí)現(xiàn)！

方法一：在組件的 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>

缺點(diǎn)：

• 適用于單個(gè)組件，但不適合全局管理標(biāo)題。
• 如果頁面復(fù)雜，需要在多個(gè)組件中重復(fù)寫 document.title，代碼難以維護(hù)。

方法二：使用 Vue Router 監(jiān)聽路由變化，動(dòng)態(tài)修改 title

如果你的項(xiàng)目是多頁面應(yīng)用（SPA），通常會(huì)使用 Vue Router 來管理頁面切換。在這種情況下，我們可以在全局導(dǎo)航守衛(wèi)中監(jiān)聽路由變化，并根據(jù) meta 字段動(dòng)態(tài)修改 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 中監(jiān)聽并修改 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");

效果：

• 當(dāng)用戶切換到 Home.vue 時(shí)，頁面 title 自動(dòng)變?yōu)?nbsp;“首頁 - 我的商城”。
• 當(dāng)用戶進(jìn)入 Product.vue 時(shí)，title 變?yōu)?nbsp;“商品詳情 - 我的商城”。

優(yōu)點(diǎn)：

• 適用于多頁面應(yīng)用（SPA），全局管理 title，無需在每個(gè)組件手動(dòng)修改。
• 遵循 Vue Router 邏輯，代碼更清晰、易維護(hù)。

缺點(diǎn)：

• 只能基于 meta.title 修改 title，如果 title 需要?jiǎng)討B(tài)數(shù)據(jù)（如商品名稱），仍需手動(dòng)處理。

方法三：封裝全局 useTitle 組合式 API（Vue 3 推薦）

在 Vue 3 組合式 API 中，我們可以封裝一個(gè) useTitle 函數(shù)，使 title 綁定到一個(gè) ref 變量，從而在任何組件中輕松修改。

步驟 1：創(chuàng)建 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">修改標(biāo)題</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>

效果：

• 進(jìn)入頁面時(shí)，title 自動(dòng)變?yōu)?nbsp;“Vue 3 官方指南 - 我的商城”。
• 點(diǎn)擊修改標(biāo)題按鈕后，title 動(dòng)態(tài)變?yōu)?nbsp;“Vue 3 深入解析 - 我的商城”。

優(yōu)點(diǎn)：

• 響應(yīng)式 title：當(dāng) title 變化時(shí)，瀏覽器 title 自動(dòng)更新。
• 可復(fù)用性高：useTitle 可以在任何組件中使用，無需手動(dòng) watch document.title。
• Vue 3 組合式 API 友好，符合現(xiàn)代開發(fā)習(xí)慣。

缺點(diǎn)：

• 僅適用于 Vue 3，Vue 2 需要使用 watch 或 computed 進(jìn)行手動(dòng)監(jiān)聽。

總結(jié)：哪種方法最適合你？

如果你只是需要在單個(gè)頁面修改 title，方法一（mounted）足夠。

如果你在Vue Router 項(xiàng)目中管理 title，建議使用方法二（meta.title）。

如果你想要響應(yīng)式 title 綁定，并希望代碼更清晰，**方法三（useTitle 組合式 API）**是最佳選擇！

以上就是Vue動(dòng)態(tài)修改頁面Title(瀏覽器頁簽名稱)的三種方法的詳細(xì)內(nèi)容，更多關(guān)于Vue動(dòng)態(tài)修改頁面Title的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論