普通的 history.pushState 或 replaceState 函数在 vue 项目中不起作用答案

【问题标题】：Plain history.pushState or replaceState functions doesn't work in vue project普通的 history.pushState 或 replaceState 函数在 vue 项目中不起作用
【发布时间】：2019-04-10 09:46:33
【问题描述】：

我在自己的 vue.js 编写的项目中使用 history.replaceState 或 history.pushState，为什么它们不起作用。
实际上，我可以看到地址栏中的 url 地址已经改变：从 'location:3030/#/a' 到 'location:3030/#/b'，但遗憾的是当前页面没有改变。

history.pushState({key: 641.928}, '', 'http://localhost:3030/#/a');

我希望页面a 会跳转到新页面b；

【问题讨论】：

标签： javascript vue.js html5-history

【解决方案1】：

history.pushState 不会修改页面，只会修改 url。如果您想导航到新页面并重新加载，您可以使用window.location.href="http://localhost:3030/#/a"。这将重新加载页面。

如果您不想重新加载页面，您必须先手动更改页面内容（vue 使这变得容易），然后调用history.pushState 更改 URL。

【讨论】：

【解决方案2】：

history.pushState 只更新历史。您必须使用popstate event 收听历史更改（用户后退或前进）。

// update the history
history.pushState({key: 641.928}, '', 'http://localhost:3030/#/a');

// user clicks the back or forward button
window.addEventListener('popstate', function(event) {
   myFunction(event.state.key);
});

此视频描述了如何很好地实现您的目标： https://www.youtube.com/watch?v=XRC0hOh4UGY

【讨论】：