Vaadin 21中MenuBar与Tabs导航差异及MenuBar无刷新导航方案咨询

问题1：为什么MenuBar内嵌RouterLink会触发整页刷新，Tabs不会 #

Vaadin的MenuBar组件的子项<vaadin-menu-bar-item>默认会消费内部元素的点击事件，导致RouterLink渲染生成的<a>标签的点击事件无法被Vaadin客户端路由拦截器正常捕获，浏览器会走默认的锚点跳转逻辑，因此触发整页刷新。
而Tabs组件的子项<vaadin-tab>不会消费内部元素的点击事件，RouterLink的点击行为能被路由拦截器正常识别，走客户端局部路由逻辑，仅替换内容区。

问题2：官方为什么不推荐用MenuBar实现导航 #

• 定位差异：MenuBar的设计定位是操作类菜单（比如文件操作、编辑动作等触发业务逻辑的场景），并非为页面导航设计，原生不支持导航场景需要的当前路由高亮、路由状态自动同步等能力。
• 交互适配问题：MenuBar的事件处理逻辑、键盘交互逻辑都是面向操作菜单设计的，用在导航场景会额外增加很多适配成本，也容易出现整页刷新这类不符合预期的问题。
• 无障碍体验问题：MenuBar的屏幕阅读器适配逻辑是面向操作菜单的，用在导航场景会和读屏软件的预期交互逻辑冲突，影响无障碍访问体验。

问题3：MenuBar实现无刷新路由导航的方案 #

可行的方案如下：
不要直接把RouterLink嵌入到MenuItem中，而是给MenuItem添加点击监听器，在监听器中主动调用路由API跳转，示例代码如下：

// 创建菜单项
MenuItem homeItem = menuBar.addItem("首页");
MenuItem settingItem = menuBar.addItem("设置");

// 绑定点击跳转逻辑
homeItem.addClickListener(e -> UI.getCurrent().navigate(HomeView.class));
settingItem.addClickListener(e -> UI.getCurrent().navigate(SettingView.class));

如果需要实现当前路由对应的菜单项高亮，只需额外监听路由变化事件，匹配当前路由后给对应MenuItem添加激活样式即可。

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