创建带有可选子项的路线

Ronald Zarīts 发表于 Dev

罗纳德·扎里茨（RonaldZarīts）

是否可以使用“终端”路由配置路由children，或者换句话说，使用“可选”路由配置路由children。

我正在尝试创建一个可路由的主视图/详细视图，该视图最初不会显示详细信息，并且在打开详细信息视图时不会破坏列表。

例如，导航到/a，然后在不破坏的情况下a导航到/a/1。

第一次尝试：

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...使用此配置，将引发以下错误：

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'a'

第二次尝试：

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent },
  { path: 'a', component: AListComponent, children: [
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...列表组件被销毁并重新创建，即，如果它具有用户输入，则值将消失。

第三次尝试-创建一个“空”组件并默认加载它。

const routes: RouterConfig = [
  //...
  { path: 'a', component: AListComponent, children: [
    { path: '', component: EmptyComponent },
    { path: ':id', component: ADetailsComponent }
  ]},
  //...
];

...有效，但感觉像是一种解决方法。

有没有更好的办法？

贡特·佐赫鲍尔（GünterZöchbauer）

我认为空的虚拟组件不显示您的第三次尝试中显示的任何东西是最好的方法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。