Question

使用Angular 5，我使用路由在页面/组件之间导航。对于登录组件，我在注销后导航到Home组件。导航完成后，参数将传递到不应存在的URL中。

这是我LoginComponent的TS：

.....
import { Router, ActivatedRoute } from '@angular/router';

export class LoginComponent implements OnInit {

  emailVal: string = '';
  pswdVal: string = '';

  constructor(private router: Router, private route: ActivatedRoute) {
  }

  signout() {
    this.afAuth.auth.signOut();
    this.router.navigate(['../'], { relativeTo: this.route })
    //Makes Home URL http://localhost:4200/?email=&password=
  }

这是我的路由设置：

  const appRoutes: Routes = [
  { path: 'create', component: CreateComponent },
  { path: 'review/:id', component: ReviewComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: 'login', component: LoginComponent },
  { path: 'category/:id', component: CategoryComponent },
  { path: 'home', component: HomeComponent },
  { path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
  { path: '**',
    component: HomeComponent,
    pathMatch: 'full' }
];

我该如何解决这个问题？

Answer 1

最后，这样做，而不是像之前在线上那样做：

    ...
     { path: '**',
       redirectTo: HomeComponent,
       pathMatch: 'full' }
    ];

这将默认为home组件，因此路由中未指定的任何url模式都将转到home组件。所以你可能不应该写：

    this.router.navigate(['../'], { relativeTo: this.route })

但只需写下：

    this.router.navigate(['/logout']) //or home to be explicit which you have no reason not to be.

如果这仍然不起作用，那么必须是这一行：

    this.afAuth.auth.signOut();

在这种情况下，您应该添加更多代码来解释在此期间发生的事情。

路由后，参数无意中放在URL中

1 个答案: