Question

所以我正在学习飞镖和网络开发。现在我正在尝试历史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更改其网址，而不是根据网址更改更新模板。这是真的吗？

编辑：

所以也许我不够清楚。假设我有这样的事情：

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]();
  });
}

我可以点击input获得changeUrl的价值，然后通过向changeUrl添加一个监听器，我可以使用pushState更新浏览器上的网址。我期待的是，当我执行pushState时，window.onPopState将触发并调用回调，而实际上它不会。

tldr，我想要实现的是：

聆听网址更改 - ＆gt;获取当前网址 - ＆gt;使用当前url来调用存储在地图中的处理程序。使用前缀为onHashChange的{{1}}更新网址时，使用pushState也无效。

Answer 1

修改

使用
设置哈希
window.location.hash = input.value;

这会触发PopState和HashChange事件

点击此类链接

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

<强>原始

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

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

1 个答案: