vue 3 动态设置页面标题的四种主流方案：1. 路由 meta + 全局守卫（最轻量）；2. vue-meta（支持 seo 和社交分享元信息）；3. vite-plugin-html（多环境/品牌批量配置首页标题）；4. pinia title store（异步数据或响应式场景）。
用路由 meta + 全局守卫最常用
这是 Vue 3 项目中最主流、最轻量的做法。核心是：在每个路由配置里加 meta: { title: 'xxx' }，再在路由守卫中统一读取并赋值给 document.title。
操作步骤很直接：
- 在
src/router/index.ts（或.js）的路由对象中添加meta.title，比如：{ path: '/user', name: 'UserList', component: () => import('@/views/UserList.vue'), meta: { title: '用户管理 - 后台系统' } } - 在同一路由文件底部或
main.ts中注册全局前置守卫：router.beforeEach((to) => { document.title = to.meta.title || '默认标题'; }); - 确保没有其他逻辑（比如组件内 mounted 修改 title）与之冲突，避免覆盖
需要 SEO 或微信分享时推荐 vue-meta
如果项目有搜索引擎优化、微信公众号/小程序分享预览等需求，单靠改 document.title 不够——<meta name="description">、<meta property="og:title"> 等也需要动态更新。这时 vue-meta 是更完整的选择。
安装和配置很简单：
- 运行
npm install vue-meta（支持 Vue 3） - 在
main.ts中初始化：import { createApp } from 'vue';<br>import { createMetaManager } from 'vue-meta';<br>const app = createApp(App);<br>app.use(createMetaManager()); - 在页面组件中直接定义：
export default {<br> metaInfo() {<br> return {<br> title: this.productName + ' - 官方商城',<br> meta: [<br> { name: 'description', content: this.productDesc },<br> { property: 'og:title', content: this.productName }<br> ]<br> };<br> }<br>};
多环境或品牌定制可用 vite-plugin-html
适合需要根据部署环境（如 dev/test/prod）或客户品牌（A客户版/B客户版）批量切换首页标题的场景。它不控制每个页面，而是统一设置 index.html 的初始 title。
配合 Vite 使用：
- 安装插件：
npm install vite-plugin-html --save-dev - 在
vite.config.ts中注入：import { createHtmlPlugin } from 'vite-plugin-html';<br>plugins: [createHtmlPlugin({<br> inject: { data: { title: process.env.VITE_APP_TITLE || '系统后台' } }<br>})] - 在
.env.production中写：VITE_APP_TITLE=客户A管理平台，构建时自动生效
组件级灵活控制可封装 title store
当某些页面标题依赖异步数据（例如商品详情页需等 API 返回商品名），或者需要响应式联动（如未读消息数变化时 title 前加 badge），纯路由 meta 就不够用了。
建议用 Pinia 创建一个轻量 title store：
- 新建
src/stores/title.ts：export const useTitleStore = defineStore('title', {<br> state: () => ({ title: '默认标题' }),<br> actions: {<br> set(title: string) {<br> this.title = title;<br> document.title = title;<br> }<br> }<br>}); - 在组件中调用：
onMounted(async () => {<br> const res = await api.getProduct(id);<br> const titleStore = useTitleStore();<br> titleStore.set(`${res.name} - 商品详情`);<br>});
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
