Question

我在自己的由vue.js编写的项目中使用history.replaceState或history.pushState，为什么它们不起作用。
实际上，我可以看到网址栏中的网址已更改：从“位置：3030 /＃/ a”更改为“位置：3030 /＃/ b”，但遗憾的是当前页面没有更改。

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

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

Answer 1

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

Answer 2

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

如果您不想重新加载页面，则必须首先手动更改页面内容（这样做很容易），然后调用history.pushState来更改URL。

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

2 个答案: