Vaadin：使用选项卡组件在视图之间进行正确的导航

Question

我用 Vaadin 创建了一个导航菜单栏，我想知道如何将视图或链接附加到每个选项卡，以便单击它可以将我重定向到相应的视图。我已经设法找到解决方法，但我认为这种方法是有缺陷的：

Tabs tabs = new Tabs(new Tab("Login"), new Tab("Register"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        tabs.addSelectedChangeListener(event -> {
            if (event.getSelectedTab().getLabel().equalsIgnoreCase("Login")) {
                UI.getCurrent().navigate(LoginView.class);
            } else if (event.getSelectedTab().getLabel().equalsIgnoreCase("Register")) {
                UI.getCurrent().navigate(RegisterView.class);
            }
        });

我在 Tab 组件上没有找到单独的 clickListener 事件，这对我来说很奇怪。还注意到我可以使用 tabName.getUI() 方法将 UI 附加到选项卡，但是我找不到附加它的方法。

帮助我找到使用选项卡导航的正确方法！提前致谢！

Answer 1

在 Vaadin 14 中，您可以向选项卡添加组件。因此，您不仅可以执行以下操作，还new Tab("Login")可以执行以下操作：

private Tab createMenuItem(String title, VaadinIcon icon, Class<? extends Component> target) {
    RouterLink link = new RouterLink(null,target);
    if (icon != null) link.add(icon.create());
    link.add(title);
    Tab tab = new Tab();
    tab.add(link);
    return tab;
}

当然 RouterLink 不是唯一的选择，如果你愿意，你也可以使用 Button 并使用按钮的点击监听器来调用导航等。这里有很多选择。