子组件中的路由

Question

在一个基本的应用程序中，你有一个主vaadin-app-layout和<slot>，路由器在其中放置子组件。但如果这样的子组件本身子组件以及它们之间我想用路线路由?我可以有一个嵌套的vaadin-app-layout插槽?路由器又如何知道该在哪个槽中填充给定URL路径的组件呢?

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

Answer 1

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

参见"嵌套组件";

使用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>

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