Vue3（vue-router4）同路由重载：router.push失效原因排查

失效原因 #

你当前处于/payment?code=123&hash=123路由，调用router.push('/payment')时，vue-router会判断目标路由的路径部分和当前路由完全一致（都是/payment）。出于性能优化设计，vue-router默认不会对相同路径的路由触发重新导航流程，组件也就不会重新挂载，onMounted钩子自然不会执行，模态框也因组件未重新渲染而保持显示状态。

标准解决方案 #

1. 强制触发路由刷新 #

在router.push中传入配置对象，通过force参数强制触发完整导航流程：

router.push({ path: routerEnums.PAYMENT, force: true })

此方式会让vue-router忽略路径相同的判断，重新挂载组件并触发onMounted钩子。

2. 监听路由参数变化 #

若不想强制刷新整个路由，可在组件内监听当前路由的query/hash变化，手动触发价格计算逻辑，同时主动关闭模态框：

// script部分
import { useRoute, useRouter } from "vue-router"; 
import { watch } from 'vue'

const router = useRouter();
const route = useRoute();
const showModalPriceChange = ref(true);

// 监听query变化，触发价格计算
watch(() => route.query, () => {
  // 执行价格计算的apiCall逻辑
}, { immediate: true })

// 处理按钮点击事件
const handlePriceChange = () => {
  showModalPriceChange.value = false;
  router.push(routerEnums.PAYMENT);
}

<!-- template部分 -->
<change-price-modal-good
    v-if="showModalPriceChange"
    @price-change-button-clicked="handlePriceChange"
/>

3. 替换当前路由（无历史记录） #

如果不需要保留当前路由的历史记录，可使用replace配合force参数：

router.replace({ path: routerEnums.PAYMENT, force: true })

内容的提问来源于stack exchange，提问作者Ivan_OFF