Vaadin基础App布局：导航栏Tabs选中后如何动态切换页面内容

官方提供的基础App布局示例仅用于演示框架的结构组成，默认使用静态占位内容，没有实现导航选中和内容区域的联动逻辑，不是功能异常。实际开发中可以根据应用规模选择以下两种成熟的可落地方案。

小型应用：Tab事件手动绑定动态切换 #

适合视图数量少、逻辑简单的单页场景，不需要引入路由机制，直接通过Tab的选中事件手动替换内容容器内的组件即可。
以下示例基于Vaadin Flow（Java后端实现），如果使用Hilla前端栈，逻辑完全一致，仅需替换为TSX组件语法即可。

// 基础依赖导入由项目自动引入，无需手动编写
AppLayout appLayout = new AppLayout();

// 左侧导航栏Tabs组件
Tabs navigationTabs = new Tabs();
Tab homeTab = new Tab("Home", new Icon("lumo", "home"));
Tab aboutTab = new Tab("About", new Icon("lumo", "info-circle"));
navigationTabs.add(homeTab, aboutTab);

// 动态内容容器，默认占满AppLayout的剩余内容区域
Div contentContainer = new Div();
contentContainer.setSizeFull();
// 初始默认加载首页内容
contentContainer.add(createHomeView());

// 绑定Tab选中事件，动态替换内容
navigationTabs.addSelectedChangeListener(event -> {
    contentContainer.removeAll();
    if (event.getSelectedTab() == homeTab) {
        contentContainer.add(createHomeView());
    } else if (event.getSelectedTab() == aboutTab) {
        contentContainer.add(createAboutView());
    }
});

// 组装AppLayout布局
appLayout.getNavbar().add(navigationTabs);
appLayout.setContent(contentContainer);

// 自定义视图生成方法
private Component createHomeView() {
    Div homeContent = new Div(new H1("Home 页面"), new Span("这是首页的自定义业务内容"));
    homeContent.setPadding(true);
    return homeContent;
}

private Component createAboutView() {
    Div aboutContent = new Div(new H1("About 页面"), new Span("这是关于页的自定义业务内容"));
    aboutContent.setPadding(true);
    return aboutContent;
}

实现注意事项：

• 如果切换频率较高，可以提前用Map<Tab, Component>缓存已经初始化的视图实例，避免重复创建组件带来的性能损耗
• 不需要手动调整内容容器的尺寸，AppLayout会自动让内容区占满导航栏以外的剩余空间

中大型应用：路由联动自动切换（生产环境优先选择） #

Vaadin内置的路由机制可以自动处理导航选中态、内容切换、浏览器历史记录等能力，无需手动编写监听逻辑，是生产环境的首选方案。
首先定义公共的AppLayout父布局，所有子视图都会自动填充到这个布局的内容区域：

@RoutePrefix("")
public class MainLayout extends AppLayout implements RouterLayout {
    public MainLayout() {
        // 直接用RouterLink作为Tab子项，自动和路由联动
        Tabs navigationTabs = new Tabs(
            new RouterLink("Home", HomeView.class),
            new RouterLink("About", AboutView.class)
        );
        this.getNavbar().add(navigationTabs);
    }
}

再分别定义每个业务视图，指定使用MainLayout作为父布局：

@Route(value = "", layout = MainLayout.class)
public class HomeView extends Div {
    public HomeView() {
        add(new H1("Home 页面"), new Span("首页业务内容"));
        setSizeFull();
        getStyle().set("padding", "var(--lumo-space-m)");
    }
}

@Route(value = "about", layout = MainLayout.class)
public class AboutView extends Div {
    public AboutView() {
        add(new H1("About 页面"), new Span("关于页业务内容"));
        setSizeFull();
        getStyle().set("padding", "var(--lumo-space-m)");
    }
}

这种实现的核心优势包括：

• 每个视图的路由路径直接和导航项绑定，点击导航自动加载对应视图，无需手动维护内容的添加移除逻辑
• 导航Tab的选中状态会自动匹配当前访问的路由，无需手动设置选中态
• 支持URL直接访问对应视图、浏览器前进后退、路由权限拦截等生产级能力

注意：使用RouterLink作为Tab的子项时，不要额外给Tabs添加手动的选中切换逻辑，避免和内置路由的处理逻辑冲突。

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