如何在 vaadin 14 中重置应用程序布局？

Question

我在 vaadin 14 中使用 App Layout 组件，并将 /admin 路由设置为我的默认视图。我设置了一个选项卡组件来切换这些视图的主要区域内容。它工作得很好，但是，我不知道如何将 /admin 路由重置为其初始状态。我尝试设置一个锚点以转到“/admin”，但它刷新了页面。

主视图

@Route("admin")
public class MainView extends AppLayout {

  @Autowired
  public MainView() {
    setPrimarySection(AppLayout.Section.DRAWER);
    addToDrawer(createMenuTabs());
    setContent(customView);
  }

  private static Tabs createMenuTabs() {
    final Tabs tabs = new Tabs();
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    tabs.add(getAvailableTabs());
    return tabs;
  }

  private static Tab[] getAvailableTabs() {
    final List<Tab> tabs = new ArrayList<>(2);
    tabs.add(createTab(VaadinIcon.HOME, "Home", CustomView.class));
    tabs.add(createTab(VaadinIcon.EDIT, "Events", EventsView.class));

    return tabs.toArray(new Tab[tabs.size()]);
  }

  private static Tab createTab(VaadinIcon icon, String title,
      Class<? extends Component> viewClass) {
    return createTab(populateLink(new RouterLink(null, viewClass), icon, title));
  }

  private static Tab createTab(Component content) {
    final Tab tab = new Tab();
    tab.add(content);
    return tab;
  }

  private static <T extends HasComponents> T populateLink(T a, VaadinIcon icon, String title) {
    a.add(icon.create());
    a.add(title);
    return a;
  }
}

我让它工作的唯一方法是向自定义视图添加路由。

自定义视图

@Route(value = "admin/home", layout = MainView.class)
public class CustomView extends VerticalLayout...

但这会将 url 更改为 .../admin/home。

我只想回到 /admin 而不刷新。我希望我只是在文档中遗漏了一些简单的东西。

Answer 1

我最终通过给我的 MainView 一个 @RoutePrefix("admin") 而不是 @Route 来解决这个问题，然后在我的 "home" 视图中查看 @Route("") 路线。这种方式不会重新加载或重置应用程序，而只是回到主页 URL 而无需刷新。

如何在 vaadin 14 中重置应用程序布局？

How do I reset the App Layout in vaadin 14?

java

vaadin

spring-boot

vaadin-flow