如何在Angular程序中将未知路由重定向到主路由？答案

【问题标题】：How to redirect unknown routes to home route in Angular program?如何在Angular程序中将未知路由重定向到主路由？
【发布时间】：2020-08-14 02:24:58
【问题描述】：

我有一个routes.ts 文件，如下所示：

import { AuthGuardService as AuthGuard } from '../services/auth-guard.service';

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},

];

还有一个像这样的auth-guard.service.ts 文件：

export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isLoggedIn()) {
      this.router.navigate(['home']);
      return false;
    }
    return true;
  }
}

它适用于像users 这样的已知路由，但是当我尝试像homeee 这样的未知路由时，它不能正常工作，并显示一个带有页眉和页脚且中间没有内容的页面。如何将所有未知路由重定向到主组件？

我也想知道这是我喜欢做的事情的好方法吗？（我喜欢只有登录的用户才能看到除主组件之外的其他组件，并且登录前的所有路由都被重定向到主组件。

【问题讨论】：

标签： angular redirect routes canactivate angular-activatedroute

【解决方案1】：

Angular 文档建议定义wildcard route。

添加通配符路由来拦截无效的 URL 并优雅地处理它们。通配符路由的路径由两个星号组成。它匹配每个 URL。如果路由器无法匹配配置中较早的路由，则路由器将选择此路由。通配符路由可以导航到自定义的“404 Not Found”组件或重定向到现有的

路由器选择具有第一次匹配获胜策略的路由。通配符路由是路由配置中最不具体的路由。确保它是配置中的最后一条路由。

在你的情况下：

{ path: '**', redirectTo: 'home'}

【讨论】：

谢谢！但是有一个问题，当我尝试像/users 这样的预定义路由时，它会重定向到/home，并且浏览器中的URL 会自动更改，但是当我尝试像home1 这样的未知路由时，它会再次重定向到主路由，但URL 仍然存在在未知的路线。我该如何解决？
当然{ path: '**', redirectTo: '/home' } 会更好？否则HomeComponent 将对localhost:4200/blah 可见。如果HomeComponent 有参数，它们就不会被通配符路由拾取。
@KurtHamilton 你是对的。感谢您指出了这一点。我会更新我的答案。
@user3486308 浏览器控制台中是否出现任何类型的错误？

【解决方案2】：

通过添加备用路由来增强您现有的路由数组：

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},
    {path: '**' , component : HomeComponent},

];

小心将它包含在数组的末尾，否则它会捕获所有路由。

【讨论】：

谢谢！但是有一个问题，当我尝试像/users 这样的预定义路由时，它会重定向到/home，并且浏览器中的URL 会自动更改，但是当我尝试像home1 这样的未知路由时，它会再次重定向到主路由，但URL 仍然存在在未知的路线。我该如何解决？