前后端分离架构下路由元数据(Meta)提取规范【SPA适配】

夜芳姑娘_6663

发布时间：2026-06-18 18:57:37

600人浏览过

来源于php中文网

原创

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

前后端分离架构下路由元数据(meta)提取规范【spa适配】

前后端分离架构中，路由元数据（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”）