1

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

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

4

1 回答 1

2

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>

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

于 2021-10-11T11:01:28.817 回答