父路由组件不刷新、子路由切换内容不更新，是因Vue Router默认复用组件实例；应移除顶层router-view的key绑定，仅在子级router-view设key，并通过watch $route、beforeRouteUpdate或onActivated响应变化。

父路由组件不刷新、子路由切换时内容也不更新，本质是 Vue Router 的组件复用机制在起作用——它默认复用同一组件实例，避免重复创建和销毁。但这也导致 mounted、created 等生命周期钩子不会再次执行，数据或状态可能滞留。要让子路由切换时“感知变化”并正确响应，关键不是强制刷新父组件，而是让父路由下的 <router-view></router-view> 正确识别子路由变更，并触发对应逻辑。

检查并移除全局 router-view 的错误 key 绑定

最常见原因是：在 App.vue 或布局组件的顶层 <router-view></router-view> 上写了 :key="$route.fullPath"。这会导致每次路径变化（哪怕只是 /a/b → /a/c）都强制卸载并重建整个父路由组件，侧边栏、导航栏全重绘——完全违背嵌套路由的设计初衷。

• ✅ 正确做法：删掉 App.vue 中 <router-view></router-view> 的 key 属性，让它默认复用父组件
• ✅ 若需控制子路由层级的刷新粒度，只在父组件内部的 <router-view></router-view>（即子视图容器）上设置 key，例如：:key="$route.name" 或 :key="$route.path"

在父组件中监听子路由变化并更新逻辑

父路由组件保持复用，但你需要主动响应子路由的跳转。不能依赖 mounted，而应使用以下方式之一：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• watch $route：在 setup 中用 watch 监听 $route 对象，当 to.name、to.params 或 to.query 变化时执行数据拉取或状态重置
• 使用 beforeRouteUpdate：该守卫仅在“同一组件被复用”时触发（如 /user/1/profile → /user/1/orders），适合做局部更新。注意：它不适用于静态路径切换（如 /a/b → /a/c 若无动态参数），此时需配合 query 参数或自定义 meta 字段
• 把关键逻辑移到 onActivated（keep-alive 场景）：若父组件已用 <keep-alive></keep-alive> 包裹，onMounted 只执行一次，应将需每次刷新的逻辑（如接口请求）放在 onActivated 中

合理配置 children 路由与默认行为

确保嵌套路由结构本身支持平滑切换：

立即学习“前端免费学习笔记（深入）”；

• 父路由组件模板中必须包含 <router-view></router-view>，这是子组件渲染的唯一出口
• 子路由 path 写相对路径（如 path: 'list'），完整路径为 /parent/list；不要加斜杠开头
• 为父路径添加空子路由作为默认展示页，例如：{ path: '', redirect: 'list' } 或 { path: '', component: DefaultChild }，避免访问 /parent 时子区域空白

按需控制缓存与刷新（进阶场景）

如果某些子路由切换需要刷新数据，另一些不需要（如列表页 → 详情页 → 返回列表页不刷新，但菜单直接点进列表页要刷新），可结合路由元信息与守卫：

• 在子路由配置中加 meta: { requiresRefresh: true }
• 在父组件 watch 中判断 to.meta.requiresRefresh，决定是否调用 fetchData()
• 或通过 query 参数临时标记，如 router.push({ path: '/a/list', query: { refresh: 1 } })，然后在 watch 里解析