Nested Routes

嵌套路由允许子路由在父路由内渲染，从而创建模块化和可重用的用户界面。父路由定义共享组件，而子路由则注入到这些父组件的特定出口中。

定义嵌套路由

嵌套路由使用 outlet 参数在 @Route 注释中创建，这建立了父子关系。outlet 确定子组件将在哪个父路由内渲染。

@Route
public class MainLayout extends Composite<AppLayout> {
  public MainLayout() {
    setHeader();
    setDrawer();
  }
}

@Route(outlet = MainLayout.class)
public class DashboardView extends Composite<Div> {
  private final Div self = getBoundComponent();

  public DashboardView() {
    self.add(new H1("仪表板内容"));
  }
}

@Route(outlet = DashboardView.class)
public class SettingsView extends Composite<Div> {
  private final Div self = getBoundComponent();

  public SettingsView() {
    self.add(new H1("设置内容"));
  }
}

在这个例子中：

MainLayout 是一个 布局路由。
DashboardView 是一个嵌套在 MainLayout 里的 视图路由。
SettingsView 是一个嵌套在 DashboardView 里的 视图路由。

当导航到 /dashboard/settings 时，路由器：

渲染 MainLayout。
将 DashboardView 注入到 MainLayout 的出口中。
最后，将 SettingsView 注入到 DashboardView 的出口中。

这种层次结构在 URL 中得以体现，每个段落代表了组件层次中的一个级别：

URL: /dashboard/settings
层次结构：
- MainLayout: 布局路由
- DashboardView: 视图路由
- SettingsView: 视图路由

这种结构确保了一致的共享用户界面组件（例如头部或导航菜单），同时允许这些布局内的内容动态变化。

定义嵌套路由​

定义嵌套路由