Vaadin 14.4.0单页项目实现浏览器前进后退历史记录处理

我最近在开发一个单类单页面的Vaadin项目，原本是通过切换布局来模拟页面跳转效果，但因为没有实际访问新的链接或页面，用户没法通过浏览器返回按钮回到之前的布局状态。

我尝试通过修改URL的hash值并监听hashChange事件来解决这个问题，但发现Vaadin自带的HistoryChangeEventHandler并不支持监听hash变化。最开始写的代码还出现了报错：

最初的错误代码 #

History history = UI.getCurrent().getPage().getHistory();
TextField textField = new TextField();
add(textField);
Button button = new Button();
button.setText("New link");
button.addClickListener(e-> history.pushState(null, "#"+textField.getValue()));
add(button);
Button button1 = new Button();
button1.setText("Go back");
button1.addClickListener(e-> history.back());
add(button1);
getElement().executeJs( 
"const serverCallback = element.$server.onHashChange; this.window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);" 
);
@ClientCallable
public void onHashChange(String hash) {
    System.out.print("test "+hash);
}

报错信息 #

(ReferenceError) : element is not defined

正确的解决方案 #

问题出在JS代码里的element变量没有正确指向当前的Vaadin元素，我们需要把当前元素作为参数传递给executeJs方法，用$0来引用它。修改后的可行代码如下：

监听Hash变化的核心代码 #

getElement().executeJs("const serverCallback = $0.$server.onHashChange;" + 
"window.addEventListener('hashchange', function () {serverCallback(location.hash);}, false);", getElement());

@ClientCallable
public void onHashChange(String location) {
    System.out.println("Current location is: " + location);
}

搭配之前的历史记录操作代码，就能正常实现修改hash、监听hash变化，以及通过浏览器返回按钮回到之前的状态了。

额外示例：从JavaScript直接调用Java方法 #

如果需要手动从JS触发Java端的方法，可以用这种方式：

getElement().executeJs("$0.$server.onHashChange(\"It works\");", getElement());

感谢Erik提供的帮助！

内容的提问来源于stack exchange，提问作者LanDanois