Vue动态修改页面Title(浏览器页签名称)的三种方法

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

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

// 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;

// 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");

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

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

<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>