Vaadin：自动路由到 child 组件

Question

我正在遵循一个基本的路由设置 as described in the docs，其中您有一个伞形组件，然后是多个 child 组件，这些组件呈现为伞形组件的 <slot>。

因此主要 x-layout 组件的 HTML 模板看起来有点像这样：

<vaadin-app-layout>
  <slot></slot>
</vaadin-app-layout>

我的路线看起来有点像这样：

router.setRoutes([
    {path: '/',
      component: 'x-layout',
      children: [
        {path: '/users', component: 'x-user-list'},
        {path: '/rooms', component: 'x-rooms-list'},
      ]
    }
  ]);

与文档中的示例相反，我想在使用其根 URL 调用应用程序时立即加载 child 组件之一（例如，x-user-list）（ '/')，并且无需用户从导航栏左右选择 link。所以我需要一种从主组件自动调用路由的方法。我怎样才能做到这一点？

与示例相反，我想为每个 child 维护一个不同的路径，所以像这样的东西是行不通的：{path: '/', component: 'x-navigation-layout', children: [{path: '/', component: 'x-user-list'}, ...]}
我不能在路由设置中使用 redirect，因为它与加载伞组件所必需的 component 属性冲突。
出于同样的原因，我无法在组件的 onBeforeEnter 事件处理程序中使用重定向，并且 onAfterEnter 处理程序不允许重定向。
我可以使用 Route.go() 静态方法进行导航，但是把它放在哪里？

Answer 1

为路由尝试以下结构：

export const views: ViewRoute[] = [
  {
    path: '',
    component: 'x-user-list',
    title: '',
  },
  {
    path: 'userlist',
    component: 'x-user-list',
    title: 'User List',
  },
];
export const routes: ViewRoute[] = [
  {
    path: '',
    component: 'x-layout',
    children: [...views],
  },
];

Vaadin：自动路由到 child 组件

Vaadin: Automatically route to a child component

vaadin

vaadin-fusion

vaadin20

hilla