在 vaadin 23 中，无法直接拦截浏览器原生「返回」按钮以显示自定义确认对话框；但可通过 `beforeunload` 事件实现离开页面前的通用提示，或结合 vaadin 导航生命周期监听内部路由跳转，从而在用户即将离开当前视图时触发确认逻辑。
Vaadin 本身不提供对浏览器原生「后退」按钮（如地址栏或硬件返回键）的细粒度控制——这是由浏览器安全策略限制的。你无法用 Vaadin 组件（如 Dialog）在 beforeunload 期间弹出自定义 UI，因为该事件仅允许返回纯文本字符串（现代浏览器通常忽略自定义内容，仅显示统一提示）。
✅ 推荐方案分两类：
-
全局离开页面提示（适用于关闭标签页、输入新 URL、刷新等）
使用 Page.executeJs() 注入 beforeunload 处理器：
@Route("dashboard")
public class DashboardView extends VerticalLayout {
public DashboardView() {
// 启用“有未保存更改”状态标识
boolean hasUnsavedChanges = true; // 实际中应动态判断
if (hasUnsavedChanges) {
getElement().executeJs(
"window.addEventListener('beforeunload', event => {" +
" event.preventDefault();" +
" event.returnValue = '您有未保存的更改，确定要离开吗？';" +
"});"
);
}
// 可选：离开后清理监听器（例如提交成功后）
Button saveButton = new Button("保存", e -> {
// ... 保存逻辑
getElement().executeJs("window.removeEventListener('beforeunload', window.__vaadinBeforeUnloadHandler);");
});
add(saveButton);
}
}⚠️ 注意：
- 浏览器（Chrome/Firefox/Edge）不再显示你返回的字符串，而是统一显示类似「此页面正在询问您是否要离开……」的提示；
- beforeunload 不会触发于 Vaadin 内部导航（如点击 RouterLink 或 UI.navigate()），仅适用于跨页面跳转场景。
-
拦截 Vaadin 内部导航（如点击 <vaadin-router-link> 或调用 UI.navigate()）
利用 BeforeEnterObserver 和 BeforeLeaveObserver 接口，在视图切换前进行校验：
@Route("form")
public class FormView extends VerticalLayout
implements BeforeEnterObserver, BeforeLeaveObserver {
private boolean isDirty = false;
public FormView() {
TextField field = new TextField("输入内容");
field.addValueChangeListener(e -> isDirty = !e.getValue().isBlank());
add(field);
}
@Override
public void beforeEnter(BeforeEnterEvent event) {
// 进入前可重置状态
}
@Override
public void beforeLeave(BeforeLeaveEvent event) {
if (isDirty) {
// ❌ 不能在此处直接 show() Dialog（异步阻塞不可行）
// ✅ 正确做法：取消导航，并手动打开确认对话框
event.cancel();
Dialog confirmDialog = new Dialog();
confirmDialog.setHeaderTitle("确认离开？");
confirmDialog.add(new Span("当前有未保存的更改，是否放弃？"));
Button leaveBtn = new Button("离开", e -> {
isDirty = false;
confirmDialog.close();
// 手动触发原导航目标（需保存 event.getForwardTo()）
event.forwardTo(event.getForwardTo()); // ⚠️ 需提前缓存目标
});
Button stayBtn = new Button("留下", e -> confirmDialog.close());
confirmDialog.add(leaveBtn, stayBtn);
confirmDialog.open();
}
}
}? 关键技巧：
- BeforeLeaveEvent.cancel() 是必须的，否则对话框未打开导航已发生；
- event.forwardTo(...) 需在用户确认后显式调用，且目标需提前捕获（建议在 beforeLeave 开头保存 event.getForwardTo()）；
- 若使用 UI.navigate() 触发跳转，建议封装为带确认逻辑的工具方法，而非依赖全局监听。
? 总结：
- 浏览器后退按钮 → 只能用 beforeunload（纯文本提示，无自定义 UI）；
- Vaadin 内部导航 → 用 BeforeLeaveObserver + Dialog + event.cancel() + 手动 forwardTo() 实现真正可控的确认流；
- 永远避免在 beforeunload 中尝试渲染 Vaadin 组件——它运行在 JS 全局上下文，与服务器端组件生命周期无关。
