Child 个组件内的路由

Question

在基本应用程序中，您有一个主 vaadin-app-layout 和 <slot>s，路由器在其中放置 child 组件。但是如果这样一个 child 组件本身有 child 组件并且我想使用路由在它们之间路由怎么办？我可以有一个带插槽的嵌套 vaadin-app-layout 吗？对于任何给定的 URL 路径，路由器如何知道在哪个插槽中填充组件？

举一个具体的例子，想象一个典型的应用程序布局，其中 header、左侧的导航栏和右侧的主视图。将不同的视图加载到主视图窗格可以正常使用 Vaadin 路由器。但是现在想象加载到主视图的组件之一本身就是一个带有两个选项卡的 Vaadin 选项卡视图，我希望能够从应用程序中的任何地方路由到这些选项卡中的每一个，为它们添加书签，asf.

Answer 1

Vaadin Router supports this by specifying the component property both in parent and child route objects.

请参阅 https://vaadin.github.io/router/vaadin-router/#/classes/Router/demos/demo/index.html

中的“嵌套组件”部分

使用 2 层或更多层的嵌套布局应该没有问题。例如：

router.setRoutes([
  {path: '/',
    component: 'x-main-layout',
    children: [
      {path: '/', component: 'x-home-view'},
      {path: '/subsection',
        component: 'x-subsection-layout',
        children: [
          {path: '/', component: 'x-other-view'},
          {path: '/list', component: 'x-list-view'},
        ]
      },
    ]
  }
]);

导航到 /subsection/list 时，您最终会得到：

<x-main-layout>
  <x-subsection-layout>
    <x-list-view></x-list-view>
  </x-subsection-layout>
</x-main-layout>

视图组件只是根据您的路由层次结构添加为子项，因此当您在组件上有影子根时，内容将被放入默认槽中。

Child 个组件内的路由

Routing within Child Components

vaadin20

vaadin-fusion

hilla