如何在vue 3（vue-router 4）中重新加载相同的路由

Question

我在开发过程中遇到了一个奇怪的案例。

我有一个模态组件，警告用户价格变化：
如果用户单击按钮，我希望页面重新加载并自动运行onMounted挂钩，然后计算挂钩内的新价格apiCall.

我遇到的行为是页面没有任何变化，模式保持打开状态，就像忽略了 router.push() 方法。

我想在 Vue 3 中实现这个解决方案并理解为什么 router.push() 不起作用。 我找到了 window.location.href 的解决方法，但我很想听听为什么使用标准路由器不允许我使用标准 vue-router 取得成功。

我在路线 / payment?code=123&hash=123 内，对象 routerEnums.PAYMENT 等于 '/ payment'，它与除此之外的任何其他路线都可以正常工作。

/**script**/

import {useRouter} from "vue-router"; 
const router = useRouter();

/**template**/

<change-price-modal-good
    v-if="showModalPriceChange"
    @price-change-button-clicked="router.push(routerEnums.PAYMENT)"
/>

Answer 1

正如文档中所说的 router.push() “此方法将一个新条目推送到历史堆栈中，因此当用户单击浏览器后退按钮时，他们将被带到上一个 URL。这是当您单击时内部调用的方法a ，因此单击相当于调用 router.push(...)。”。

如果你想重新加载组件，请使用 router.go(0)。您可以在此处链接找到更多信息。