M5-6详细设计：路由视图与缓存边界

这份设计文档说明 M5-6 为什么选择路由缓存与布局场景，以及它将如何接入现有方法库。

设计目标

把路由壳层问题从“router-view 怎么放、keep-alive 怎么包”还原成“应用壳层、布局切换、缓存策略和页面语义如何分层”的边界设计问题，并用一篇案例把现代 Vue / Nuxt 项目里更稳的组织方式说清楚。

为什么在 M5-6 选路由缓存与布局

在当前方法库里，已经补齐了：

• 页面型案例
• 基础组件型案例
• SSR / hydration 运行时边界
• Nuxt 页面数据获取与渲染边界
• 状态管理型案例
• 复杂交互型案例
• 认证与权限型案例

下一步最自然补的，就是根应用壳层、路由出口、布局切换和页面缓存这条横向主线。因为它会同时影响：

• 页面型案例中的壳层组织与切页体验
• Nuxt / SSR 场景中的页面复用与运行时切换
• 后台系统中的主框架、tab 页与布局选择
• 多页面系统里的缓存与激活语义

所以路由缓存与布局非常适合作为 M5-6 的横向扩展线。

本轮案例的复杂度中心

本轮复杂度中心主要有四个：

• 根壳层与页面层的职责边界
• 路由出口与布局层的职责边界
• 页面缓存策略的显式化
• mounted 与 activated 语义的分离

与现有框架的映射关系

本轮将重点强化统一框架中的这些步骤：

• 第一步：先判断这是哪一类重构对象
• 第二步：找到真正的复杂度中心
• 第五步：用“容器组件 + 展示组件”重新切边界
• 第六步：显式数据流优先，隐式通信后退

本轮交付物

本轮预期交付物包括：

• 新案例：../路由视图缓存与布局编排重构.md
• 新任务拆解：19-M5-6任务拆解-路由缓存与布局场景.md
• 新详细设计：20-M5-6详细设计-路由视图与缓存边界.md
• 新开发记录：21-开发记录-路由缓存与布局编排重构.md

设计约束

本轮继续遵循当前项目约束：

• 不直接修改独立 demo 源码
• 只提炼核心逻辑与方法进入文档
• 每轮新增案例都要同步更新入口、导航和总框架

完成后的预期效果

完成后，当前方法库将会同时覆盖：

• 页面型重构
• 基础组件型重构
• 运行时边界型重构
• 框架场景型重构
• 状态管理型重构
• 复杂交互型重构
• 认证与权限型重构
• 路由与布局型重构

这会让整套方法库从“案例集合”，继续长成一张更完整的 Vue / Nuxt 架构重构地图。