如何在不导航到该 url 的情况下推送历史记录条目并更改地址栏 url？

Posted 2023-02-22

【中文标题】如何在不导航到该 url 的情况下推送历史记录条目并更改地址栏 url？

【英文标题】：How to push a history entry and change address bar url without navigating to that url?

【发布时间】：2017-09-24 11:00:07

【问题描述】：

我试图模仿 Pinterest（以及许多其他流行网站）如何实现这一目标。

当用户单击模态框时，模态框会弹出，地址栏 url 发生变化，添加了新的历史条目，但页面不会重新加载。并且当用户关闭模式时，所有内容都会恢复到以前的状态并添加新的历史记录。

Vue-Router 提供了 router.push、router.replace 和 router.go，但它们并没有达到我想要的效果。 router.push 将导航到该 url，但我正在打开一个具有与之关联的 URL 的模式，而不是转到该 url。 router.replace 替换当前历史条目，而不是添加新条目。

执行此操作的标准方法是什么？

【参考方案1】：

为此使用 Vue Router (google it)。请记住，这样的事情通常意味着付出很多努力却收获甚微。

使用 Vue Router，您可以设置您的应用程序，以便 page.com/book/Test 使用变量测试集将您定向到 page.com/book。

我建议使用 Webpack 和 Vue 插件将您的站点设置为单个文件项目，并使用该 Vue 路由器。然后你就可以得到你想要的功能了。