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 等场景，是更健壮的选择
