vue router 中推荐用 meta 字段传递静态标题数据，通过路由配置 meta.title 并在全局前置守卫中统一设置 document.title，支持嵌套路由组合标题，兼顾 seo、ssr 与维护性。

在 Vue Router 中，用 meta 字段传递静态数据是最自然、最推荐的方式之一，尤其适合控制页面标题这类与路由强绑定的元信息。它不侵入组件逻辑，也不依赖额外库，只需两步：配置 meta、读取并应用。

在 routes 数组中为每个路由添加 meta.title

meta 是 Vue Router 提供的预留字段，专用于存放任意自定义数据。设置标题时，直接在路由对象里写入 title 即可：

• 路径 '/' 对应首页标题：meta: { title: '首页' }
• 路径 '/user/profile' 对应个人页：meta: { title: '个人资料 - 码小课' }
• 支持中文、空格、符号，无需编码；也支持变量插值（如 title: `${brandName} - 首页`），前提是该变量在路由配置作用域内可访问

通过全局前置守卫统一读取并设置 document.title

所有路由跳转都会经过 router.beforeEach，这里可以安全、集中地提取 meta 并更新标题：

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

• 检查 to.meta.title 是否存在，存在则赋值给 document.title
• 建议设置兜底标题，比如 document.title = to.meta.title || '默认站点'
• 注意：守卫中不能直接使用 this，所有操作基于 to（目标路由）和原生 DOM API

进阶技巧：支持嵌套路由与继承式标题

当使用嵌套路由（如 /admin/users）时，可通过遍历 to.matched 获取完整匹配链，组合出层级化标题：

• 例如父级 meta: { title: '管理后台' }，子级 meta: { title: '用户列表' }
• 在守卫中写：const titles = to.matched.map(r => r.meta.title).filter(Boolean); document.title = titles.join(' - '); // → '管理后台 - 用户列表'
• 避免重复设置，确保只在 next() 前执行一次 title 更新

为什么不直接在组件里设 title？

虽然 mounted() 或 created() 也能改 document.title，但存在几个实际问题：

• SEO 不友好：服务端渲染或预渲染时，组件尚未挂载，标题不会生效
• 前进/后退时可能失效：浏览器缓存页面状态，组件不重新 mounted，标题无法恢复
• 维护分散：每个组件都要写一遍，违反 DRY 原则；改一个标题得翻多个文件
• meta 方案天然兼容 SSR、微前端、PWA 等场景，是更健壮的选择