Vaadin：自动路由到子组件

Question

我正在遵循基本路由设置 as described in the docs，其中您有一个伞形组件，然后是多个子组件，它们呈现为伞形组件的 <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 ('/') 调用应用程序时立即加载其中一个子组件（例如 x-user-list），而无需用户选择来自导航栏左右的链接。所以我需要一种从主组件自动调用路由的方法。我怎样才能做到这一点？

• 与示例相反，我想为每个孩子保持不同的路径，所以这样的事情不会起作用：{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],
  },
];