嵌套路由父子组件通信：路由跳转与状态管理方案

嵌套路由中父子组件的通信，是一个看似简单实则复杂的问题。核心在于处理好三件事：数据如何流动、如何避免组件耦合、以及如何复用路由状态。直接使用 this.$parent 或全局事件总线，虽然短期内能快速解决问题，但项目规模扩大、组件关系变得复杂后，维护成本会急剧上升。更稳妥的做法是充分利用 Vue Router 自身的能力，并结合状态管理工具，建立一套清晰且解耦的方案。

利用 $route 对象共享只读参数

父组件（例如布局页面）与其路由子组件（例如详情页）共享同一个 $route 实例。这本身就是一个轻量且现成的通信渠道。URL 中的参数（params、query）和路由元信息（meta）都可以用于传递数据。

• 路由元信息（meta）传递静态上下文：在路由配置中定义 meta 字段，存放页面标题、权限标识等静态信息。父组件和子组件均能直接读取，无需逐层传递。
• URL 参数（params）传递关键业务 ID：将核心业务 ID 设计进路由路径，例如 /project/:id/task/:taskId。子组件只需通过 watch: $route 监听变化即可响应不同数据，无需额外使用 props。
• 查询参数（query）的使用注意事项：query 适合传递筛选条件、分页页码等简单扁平的状态。应避免传递复杂对象，因为序列化与反序列化操作容易引发问题，且导致状态管理混乱。

通过 provide / inject 实现跨层级响应式注入

当子组件需要调用父组件的方法或访问父组件的响应式数据（例如触发列表刷新、控制全局加载状态）时，provide/inject 比 props 更灵活，且不会破坏嵌套路由的结构。

• 父组件提供上下文：在父组件（如 ProjectView）的 setup() 中使用 provide 提供一个响应式上下文对象，例如 provide('projectContext', reactive({ loading, refresh, currentProject }))。
• 子组件按需注入：无论嵌套多深的子组件（只要是路由层级的子组件），均可通过 inject('projectContext') 获取该上下文。修改其中的 loading 值，父组件的 UI 会自动更新。
• 关键点：注入的值必须是响应式对象（如 reactive 或 ref），普通 JavaScript 对象无法触发视图更新。

结合 Pinia 管理路由关联的持久化状态

有些状态需要跨越路由生命周期存在，或被多个嵌套视图共享，例如表单草稿数据、复杂筛选条件、侧边栏折叠状态。这类状态交由 Pinia 这样的状态管理库统一处理最为合适。

• 按功能域建立 Store：为每个功能模块建立独立的 Store，例如 useTaskStore()。在组件的 onBeforeRouteUpdate 守卫中，可将当前路由的参数同步更新到 Store 中。
• 组件直接消费 Store：子组件直接导入并使用对应 Store（import { useTaskStore } from '@/stores/task'），读写状态完全独立于父子组件关系，实现彻底解耦。
• 状态变化驱动路由：可利用 store.$subscribe 监听 Store 中关键字段的变化。一旦变化，自动触发相应路由跳转或数据加载，例如筛选条件改变时重新加载子路由数据。

用导航守卫 + 路由元信息控制通信时机

某些通信场景对时机要求严格，例如必须在进入子路由前确保父级数据已加载完毕。此时，将导航守卫与路由元信息结合使用，能提供可靠的解决方案。

• 元信息作为信号旗：在父级路由配置中设置元信息标志，例如 meta: { requiresParentData: true }。
• 守卫中统一处理：在全局前置守卫中检查该标志。若为真，则先调用父级数据对应的 Store 方法（如 fetchIfMissing()）确保数据就绪，再执行 next() 放行。
• 子组件直接消费：通过这种方式，子组件在 onMounted 生命周期中无需重复请求数据，可直接从已准备好的 Store 中获取，提升体验流畅度。

总而言之，嵌套路由的通信没有万能方案。关键在于根据数据流的性质（只读参数、双向交互或持久化）以及通信时机，选择最匹配的组合方式。充分利用路由自身的能力，同时让状态管理工具各司其职，代码便会清晰且易于维护。