在 Vue 3 中，直接 router.push() 到当前路由（含相同路径和参数）不会触发组件重新挂载；本文详解通过 的 key 控制组件强制刷新的原理与实践方案。
在 vue 3 中，直接 `router.push()` 到当前路由（含相同路径和参数）不会触发组件重新挂载；本文详解通过 `
Vue Router 4 默认采用「路由复用」机制：当导航目标与当前路由完全一致（即路径、查询参数、哈希等均未变化）时，
✅ 正确解法：利用
Vue 的 key 特性决定了：当 key 值发生变化时，Vue 会卸载旧组件并创建新实例。我们将 route.fullPath（包含完整路径+查询字符串）作为 key，确保每次 router.push()（即使目标相同）只要 fullPath 字符串不同（如参数值更新），或我们主动变更 key，就能触发组件重新挂载：
<!-- App.vue 或布局组件中 --> <router-view :key="route.fullPath" />
// 组件 setup 中
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
return { route }
}
}? 进阶优化：仅对特定路由启用刷新逻辑
若仅希望 /payment 路由支持“强制重载”，其他路由保持默认复用行为，可使用计算属性控制 key：
<router-view :key="refreshKey"></router-view>
import { useRoute, computed } from 'vue-router'
import { routerEnums } from '@/router/enum'
export default {
setup() {
const route = useRoute()
const refreshKey = computed(() => {
if (route.path === routerEnums.PAYMENT) {
// 使用 fullPath 确保参数变更时 key 变化
return `payment-${route.fullPath}`
}
// 其他路由使用稳定 key，避免不必要的重渲染
return 'default'
})
return { refreshKey }
}
}⚠️ 注意事项：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- ❌ 避免滥用 window.location.reload()：它会全量刷新页面，丢失应用状态（如 Pinia store、全局变量），破坏单页应用体验；
- ❌ 不要将 key 设为 route.path：若仅路径相同但查询参数（如 ?code=123 → ?code=456）变化，path 不变，key 不变，仍无法触发重载；必须使用 fullPath 或自定义带参数标识的 key；
- ✅ 模态框关闭逻辑应与路由刷新解耦：在 @price-change-button-clicked 回调中，先设置 showModalPriceChange = false 关闭模态框，再执行 router.push(...)，确保 UI 响应及时。
总结：Vue Router 的设计哲学是高效复用，而非强制刷新。当业务需要“伪刷新”（如重新拉取数据、重跑 onMounted 逻辑）时，应优先通过 key 控制组件生命周期，而非绕过路由系统。该方案轻量、可控、符合 Vue 响应式范式，是 Vue 3 生态下的推荐实践。
