3

上下文：Vaadin 21，Java 8。

在 Vaadin 21 示例应用程序（来自https://start.vaadin.com/app/）之上，我编写了自己RouterLayout的导航栏，中间是正文，底部是页脚（作为MainLayout示例中的交换应用）。

在导航栏中，我放了一个MenuBar（https://vaadin.com/docs/latest/ds/components/menu-bar），其中包含一些RouterLinks。

当用户单击RouterLinks 中的一个时MenuBar，整个页面都会刷新，并且 my 也RouterLayout被重新实例化（= 调用构造函数）。

当我MenuBar通过一个Tabs组件（https://vaadin.com/docs/latest/ds/components/tabs）交换时，然后像以前一样单击RouterLink只是交换正文中的内容RouterLayout（如预期的那样）。

我在https://vaadin.com/docs/latest/ds/components/menu-bar知道这个提示，但我不知道为什么MenuBar和之间有区别Tabs：

菜单栏不应用于导航。使用选项卡在内容之间切换，或使用锚元素进行常规导航。

所以我的问题是：

  1. 为什么导航之间MenuBar和Tabs导航之间存在差异（页面刷新），即使我RouterLink在两种情况下都使用相同的代码进行创建？
  2. 为什么MenuBar不应该用于导航？
  3. 有没有办法在不刷新页面的情况下进行导航MenuBar？
4

1 回答 1

3

为什么不能使用 MenuBar 进行导航？

我认为主要原因是因为默认情况下 Vaadin 菜单栏不使用<a href>元素，而是依赖于 JS 事件侦听器。如果在技术上可以在其中使用锚点，我想应该没问题。

不过，我认为这对于辅助技术用户来说并不是最好的体验，因为所有/大部分链接最初都会被隐藏（您需要手动打开每个菜单才能看到它们）。

于 2021-11-10T12:42:25.220 回答