如何使用 History 类处理浏览器历史记录答案

【问题标题】：How to handle browser history using History class如何使用 History 类处理浏览器历史记录
【发布时间】：2014-01-18 16:02:55
【问题描述】：

所以我一般都在学习飞镖和网络开发。现在我正在试验历史 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);
  });
}

我的结论是onPopState 仅在我们点击浏览器的后退或前进按钮，或使用window.history.forward() 或window.history.back() 时触发。所以这就像，我们渲染一个模板，然后使用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 也不起作用。

【问题讨论】：

我多次阅读你的问题，但我仍然不确定你在问什么。有什么没有按预期工作吗？
编辑了我的答案。我想我现在明白了你的问题。如果你不这么认为，请写评论，我再看看。

标签： dart html5-history

【解决方案1】：

编辑

使用设置哈希

window.location.hash = input.value;

这会触发PopState 和HashChange 事件

点击此类链接也是如此

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

原创

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

【讨论】：