Angular 7辅助路由问题：返回首页时出现路由未找到错误

我来帮你搞定这个Angular辅助路由返回首页的bug～你的问题核心在于从多组件视图返回时，没有正确清理辅助路由的状态，导致Angular尝试匹配不存在的路由规则，才会报错。

问题根源分析 #

你现在用[routerLink] = "[ { outlets: { primary: '', secondary: 'sandbox' } } ] "临时处理，本质是给secondary outlet指定了一个存在的组件来避免报错，但这不是最优解——因为首页根本不需要渲染secondary outlet的内容，我们应该直接关闭辅助路由，而不是强行塞一个无关组件。

正确的返回写法 #

只需要把secondary outlet的值设为null，Angular就会自动移除该辅助路由的状态，只渲染primary outlet的首页组件：

[routerLink]="[ { outlets: { primary: '', secondary: null } } ]"

为什么这样有效？ #

当你给outlet赋值null时，Angular会理解为“关闭这个辅助路由的组件”，此时路由状态会回到只有primary outlet激活的状态，完美匹配你首页的路由规则{ path: '', component: HomeComponent }，自然就不会出现路由未找到的错误了。

额外补充：组件类中用代码跳转的方式 #

如果需要在组件逻辑里实现返回（比如按钮点击事件），也可以用Router服务来实现：

import { Router } from '@angular/router';

// 注入Router服务
constructor(private router: Router) {}

// 返回首页的方法
goBackToHome() {
  this.router.navigate([{ outlets: { secondary: null } }]);
}

调用这个方法后，同样会清空secondary路由，回到首页视图。

验证你的现有配置 #

顺便确认下你的路由配置和多组件跳转写法都是正确的：

• 路由数组中scanner组件指定outlet: 'secondary'是对的
• 跳转到多组件页面的[routerLink]="[ { outlets: { primary: 'adventure', secondary: 'scanner' } } ]"写法没问题

这样修改后，你就可以彻底去掉临时用的Sandbox组件，实现干净的首页返回逻辑啦～

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