路由元数据是前后端协同维护的关键基础设施，用于seo、动态标题、权限控制等；后端统一定义并提供标准接口返回结构化字段，前端通过路由守卫调用或预加载，支持动态插值与生命周期管理。

前后端分离架构中，路由元数据（Meta）提取不是后端拼模板时的“顺手一写”，而是前端单页应用（SPA）实现SEO、动态标题、权限控制、埋点统计等能力的关键基础设施。它必须由前后端共同约定、协同维护，不能靠前端硬编码或后端随意返回。

路由元数据应由后端统一定义并随路由配置下发

前端不应在组件内手动写死 title、keywords 或权限标识。真实项目中，这些信息需与路由强绑定，并由后端在初始化阶段或路由切换时提供结构化描述。

• 后端提供标准路由描述接口，如 /api/route-meta?path=/user/profile，返回包含 title、icon、requiresAuth、seoKeywords、breadCrumb 等字段的 JSON
• 前端路由守卫（如 Vue Router 的 beforeEach 或 React Router 的 useLoaderData）主动调用该接口，或在应用启动时预加载全量路由元数据缓存
• 避免前端根据 path 字符串做 switch-case 映射——这种写法难以维护，且无法支持动态路由（如 /article/:id）的元数据注入

元数据字段需标准化且语义明确

不同业务模块对 meta 的诉求不同，但核心字段应统一命名和类型，减少歧义：

Skill Weave Chains — 技能链路由引擎

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

下载

• title：字符串，用于 document.title 和页面标题栏；支持 i18n 占位符（如 "user.detail.title"），由前端国际化系统解析
• requiresAuth：布尔值，表示是否需登录；若为 true，还需指定 redirectUrl（未登录时跳转地址）
• permissions：字符串数组，如 ["user:read", "order:edit"]，供前端权限指令（v-permission）实时校验
• seo：对象，含 description、keywords、og:title 等，仅在 SSR 或预渲染场景下生效，但结构需预留
• cacheable：布尔值，指示该路由对应页面是否启用客户端缓存（影响 keep-alive 或 SW 缓存策略）

动态路由参数需支持元数据插值

对于带路径参数的路由（如 /product/:id），元数据不能静态固化。后端应在响应中提供可插值模板，前端运行时注入实际值：

• 后端返回：{"title": "商品详情 - ${productName}", "description": "${productDesc}"}
• 前端从路由参数或 store 中获取 productName、productDesc 后执行简单模板替换（不依赖 eval，可用 String.prototype.replace 或轻量插值函数）
• 关键点：插值字段名必须与后端 API 返回的数据结构一致，建议在 OpenAPI 文档中标注 meta 插值字段来源（如 “title 中 ${productName} 来自 GET /api/products/{id} 的 response.name”）

前端需建立元数据生命周期管理机制

元数据不是一次性设置就完事。SPA 页面复用、前进/后退、标签页切换都会触发状态变化：

• 路由离开时清除 document.title、meta 标签、全局状态（如当前面包屑）
• 使用 history.state 或 router.meta 持久化关键元数据，避免 popstate 时丢失
• 对 SEO 敏感页面（如商品、文章），在 mounted 后主动触发一次 meta 更新，确保搜索引擎抓取内容与最终渲染一致
• 监控 performance navigation timing，在 load 事件后检查 document.title 是否已正确设置，异常时打点告警