AngularDart路由报错：Route generator for 'chave'未包含在参数中

嘿，这个问题我之前踩过坑！你遇到的错误根源很明确：你把带参数的子路由EmpresaDetalhe设成了父路由Empresas的默认路由。当你直接导航到/empresas/时，Angular Router会自动尝试激活这个默认子路由，但此时你并没有传递chave参数，所以就触发了这个参数缺失的错误。

问题出在这行配置 #

看你的父组件EmpresasComponent的路由配置：

@RouteConfig(const [
  const Route(path: '/empresa/:chave', name: 'EmpresaDetalhe', component: EmpresaDetalheComponent, useAsDefault: true),
])

这里的useAsDefault: true告诉Router：当访问父路由/empresas/时，默认激活这个子路由。但这个子路由必须要chave参数，你没传的话自然会报错。

解决方案：给父路由加一个无参数的默认子路由 #

你需要给EmpresasComponent新增一个不带参数的子路由作为默认，比如用来显示企业列表的组件（假设你有EmpresasListaComponent），修改后的配置如下：

@RouteConfig(const [
  // 新增无参数的默认路由，显示企业列表
  const Route(path: '/', name: 'EmpresasLista', component: EmpresasListaComponent, useAsDefault: true),
  // 带参数的详情路由，不再设为默认
  const Route(path: '/empresa/:chave', name: 'EmpresaDetalhe', component: EmpresaDetalheComponent),
])

为什么这样改？ #

• 当你导航到/empresas/时，Router会激活这个无参数的默认子路由，不会再强制要求chave参数，自然不会报错。
• 当你需要跳转到详情页时，再通过router.navigate(['/Empresas', 'EmpresaDetalhe', {'chave': 'xxx'}])传递参数，就能正常激活带参数的子路由了。

如果暂时没有专门的列表组件，也可以临时用一个占位组件代替，核心就是避免把带参数的路由设为父路由的默认选项。

内容的提问来源于stack exchange，提问作者Muka