子组件内的路由

Question

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

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

Answer 1

Vaadin 路由器通过在父路由对象和子路由对象中指定组件属性来支持这一点。

请参阅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>

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