计算属性不负责动态生成路由键，只基于响应式数据推导标识符；关键在构造逻辑与路由系统联动，如拼接routeKey、匹配路径、过滤权限，并配合router.addRoute/removeRoute实现动态路由管理。
计算属性名本身不能“动态生成路由键”，它只是响应式地返回一个值；真正起作用的是你如何设计这个值的结构、何时触发更新、以及它和路由系统之间的联动逻辑。关键不在“命名”，而在“构造”与“消费”。
明确计算属性的职责边界
计算属性不负责发起请求或注册路由，只负责基于已有响应式数据（如菜单配置、用户权限、当前路径）推导出可用于匹配或渲染的标识符。例如：
- 菜单项的 routeKey 可能由
menu.code + '_' + userInfo.tenantId拼接而成 - 流程图节点的激活状态标识可基于
$route.path和节点配置的pathPattern动态比对得出 - 异步加载的子流程模块，其路由键应提前约定格式（如
flow:approval:v2），计算属性仅做存在性判断或权限过滤
配合异步菜单加载构造可路由的状态键
当流程图编辑器的菜单/节点配置需从接口获取时，不能直接在 computed 中发请求，但可以这样组织：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 用
ref([])或reactive({ items: [] })存储已加载的菜单数据 - 在
onMounted或 Pinia action 中调用 API，并将结果赋值给上述响应式变量 - 定义计算属性
availableRouteKeys，遍历该变量并提取routeKey字段（或按规则生成），返回去重后的字符串数组 - 该数组可作为
router.addRoute()的输入依据，或用于v-if控制某类节点是否渲染
为流程状态节点生成带上下文的路由键
复杂流程图中，同一节点类型（如“审批节点”）可能在不同业务流中承担不同角色。此时 routeKey 需携带上下文信息：
- 后端返回节点配置时，附带
contextId、version、env等字段 - 计算属性
currentNodeRouteKey可组合为：`node:${node.type}:${node.contextId}:${node.version}` - 在路由守卫中，用正则匹配该 key 格式，并动态加载对应组件或权限策略
- 注意避免 key 过长或含特殊字符，建议统一用短横线分隔、小写、剔除空格与斜杠
与 Vue Router 深度协同的关键点
单纯生成 key 不够，必须让 router 能识别并响应它：
- 使用
router.hasRoute(key)判断是否已注册，避免重复添加 - 在
beforeEach中检查to.meta.routeKey是否存在于availableRouteKeys中 - 若需动态挂载子路由（如流程图内嵌子流程页），用
router.addRoute(parentName, { ... })注册，并确保 parentName 已存在 - 卸载时调用
router.removeRoute(key)，尤其在切换租户或流程版本时清理旧键
