如何使用history类处理浏览器历史记录

Question

所以我正在学习dart和web开发。现在我正在试验历史API。我有：

import 'dart:html';
void main() {
ParagraphElement paragraph = querySelector('.parag');
ButtonElement buttonOne = querySelector('.testaja');
buttonOne.onClick.listen((_) {
window.history.pushState(null, 'test title', '/testdata/');
window.history.forward();
});
ButtonElement buttonTwo = querySelector('.testlagi');
buttonTwo.onClick.listen((_) {
window.history.back();
});
window.onPopState.listen((_) {
window.alert(window.location.pathname);
});
}

我的结论是，只有当我们点击浏览器的后退或前进按钮，或者使用window.history.forward()或window.history.back()时，onPopState才会触发。这就像，我们渲染一个模板，然后使用pushState更改其url，而不是根据url更改更新模板。这是真是假？

编辑：

所以也许我还不够清楚。假设我有这样的东西：

void main() {
InputElement input = querySelector('.input')
ButtonElement changeUrl = querySelector('.change-url');
changeUrl.onClick.listen((event) {
window.history.pushState(null, 'test tile', input.value);
});
Map urls = {
'/' : showRoot,
'/user/:id' : showUserProfile
};
window.onPopState.listen((_) {
var location = window.location.pathname;
urls[location]();
});
}

我可以通过点击changeUrl获得input的值，然后通过向changeUrl添加一个侦听器，我可以使用pushState在浏览器上更新url。我所期望的是，当我执行pushState时，window.onPopState将被触发并调用回调，而实际上它没有。

tldr，我正在努力实现的是：

监听url更改->获取当前url->使用当前url调用存储在映射中的处理程序。当使用前缀为#的pushState更新url时，使用onHashChange也不起作用。

Answer 1

编辑

使用设置哈希

window.location.hash = input.value;

这会触发PopState和HashChange事件

点击这样的链接

<a href="#abc">abc</a>

原始

我没有时间仔细看看你想要实现的目标
但我认为您应该为"window.onHashChange"添加一个事件处理程序，这样普通链接也可以用于导航，而不仅仅是带有onclick处理程序的按钮可以修改浏览器历史记录。