嵌套路由不等于父子组件关系，子组件默认无props或$emit通信链路；父向子传参用route.params/query，子向父反馈用事件总线或状态提升，深度复用时建议拆分容器与布局。
嵌套路由本身不等于父子组件关系
很多人误以为在路由配置里用了 children，子路由组件就自动成了父路由组件的“子组件”。其实不是：嵌套路由只是让子组件渲染在父组件的
父路由向子路由传参：用 route.params 或 route.query
这是最常用、最自然的方式。参数随 URL 路径或查询字符串携带，子组件直接从路由对象读取，无需额外绑定。
- 定义带参数的嵌套路由：
{ path: 'detail/:id', component: DetailView } - 子组件中获取：
const route = useRoute(); console.log(route.params.id);（Vue 3 Composition API） - 若需响应式更新（比如 id 变化时重新请求），用
watch(() => route.params.id, ...) - query 参数（如
/list?page=2）同样通过route.query访问，适合可选、非关键的筛选条件
子路由向父路由反馈数据：用事件总线或状态提升
子路由不能直接调用父路由的方法，也不推荐强行用 $parent。更稳妥的做法有两种：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
事件总线（轻量场景）：创建一个独立的
mitt实例，在子路由中emitter.emit('data-updated', payload)，父路由中emitter.on('data-updated', handler) -
状态提升到共同祖先（推荐）：把共享状态（如表单数据、筛选条件）放到布局组件（如
Layout.vue）或 pinia store 中，父子路由都读写同一份数据，天然同步
需要深度复用逻辑？把父组件显式拆成容器+内容
如果父路由组件承担了大量状态管理或业务逻辑，而子路由只是展示不同视图，建议重构：
- 将父路由组件拆为：一个无 UI 的逻辑容器（含数据、方法、store 调用），和一个带
- 子路由组件通过
defineProps接收容器传递的 props（如:user="currentUser"），再用defineEmits触发事件回传 - 这样既保持路由灵活性，又获得标准父子通信能力，代码更清晰、可测性更高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
