0

我遵循文档中描述的基本路由设置，其中您有一个伞形组件，然后是多个子组件，这些子组件呈现到<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()静态方法进行导航，但是放在哪里呢？
4

1 回答 1

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],
  },
];
于 2021-09-14T09:46:49.567 回答