Angular 将空路径重定向到组件

因为，我无法将空路径重定向到组件。我在这里遇到了很多问题，但没有一个解决方案能解决它

当用户第一次点击URL时。我想让他重定向到一个组件

我采用的方法是：

{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },

但它并没有重定向到那个特定的组件。相反，它将其重定向到另一个组件

详细信息中列出了路由配置：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  {
    path: 'notifications',
    component: NotificationComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'drivers',
    loadChildren: './drivers/drivers.module#DriversModule',
    canActivate: [AuthGuard]
  }, {
    path: 'managers',
    loadChildren: './users/users.module#UsersModule',
    canActivate: [AuthGuard]
  }, {
    path: 'vendors',
    loadChildren: './vendors/vendors.module#VendorsModule',
    canActivate: [AuthGuard]
  }, {
    path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'payments',
    loadChildren: './payments/payments.module#PaymentsModule',
    // canActivate: [AuthGuard]
  },
  { path: 'orders/:id', component: OrderDetailsComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: LoginComponent }

];

我使用的角度配置：

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.6",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.6",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@types/socket.io-client": "^1.4.32",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "socket.io-client": "^2.1.1",
    "zone.js": "~0.8.26"
  },

作者：

export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (!localStorage.getItem('token')) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  }

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (!localStorage.getItem('token')) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  }
}

导出类AuthGuard实现了CanActivate、CanActivateChild{
构造函数（专用路由器：路由器）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|承诺|布尔值{
如果（！localStorage.getItem（'token'））{
this.router.navigate（['/login']）；
返回false；
}否则{
返回true；
}
}
激活儿童(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot
)：可观察的|承诺|布尔值{
如果（！localStorage.getItem（'token'））{
this.router.navigate（['/login']）；
返回false；
}否则{
返回true；
}
}
}

---

任何帮助都将不胜感激。

也许问题出在AuthGuard上。重定向必须有效。

---

或者，当允许您转到/home组件时，您可以使用任何主（根）组件导航方法向ngOnInit写入数据。

它应该可以工作！您能为演示提供stackblitz代码吗？您试图将用户重定向到哪个组件？@SiddAjmera到HomeComponent但您的

HomeComponent

由

AuthGuard

保护。你能不能检查一下控件是否会转到AuthGuard？如果是，您将用户重定向到哪里？请共享您的

AuthGuard

实现。你写的逻辑可能有问题。