角清除路由器路径参数答案

【问题标题】：Angular clear router path params角清除路由器路径参数
【发布时间】：2020-02-15 08:32:33
【问题描述】：

我有一个这样的路由器配置。

{
    path: 'home',
    component: HomeComponent,
    children: [
        {
            path: '',
            component: HomeContentComponent
        },
        {
            path: ':id',
            component: HomeContentComponent
        },
        {
            path: 'home2',
            component: HomeComponent
        },
        {
            path: '',
            redirectTo: '',
            pathMatch: 'full',
        },
    ],
}

一切正常。我可以导航到 /home/id1 并可以像这样读取 HomeContentComponent 中的参数。

constructor(private activatedRoute: ActivatedRoute) {

this.activatedRoute.params.pipe(
  takeUntil(this.onDestroy)
).subscribe(params => {
  console.log("HERE ARE MY PARAMS ID", params.id);
});
}

现在，当我注销时，我会清除本地存储并导航到登录页面

this.router.navigateByUrl('/login');

这很好用。但是在登录后（可能来自不同的用户）我导航回到主页

this.router.navigateByUrl('/home');

我现在的问题是它自动从以前的用户（路由）设置了旧的 id“id1”，我可以在控制台输出中看到，并且浏览器会自动加载 /home/id1 而不是 /home。但是我需要在没有任何参数的情况下导航到 /home 路线。

有没有办法清除路径参数？

【问题讨论】：

你为什么不用router.navigate(['/home'])
登录成功后可以这样导航到首页。router.navigate(['/home']); github.com/cornflourblue/angular-7-registration-login-example
清除localStorage跟什么有什么关系？
我也尝试使用 router.navigate(['/home']) 进行导航，但 :id 参数仍然是从上次会话设置的。所以它会自动重定向到/home/id1。清除 localStorage 部分只是为了表明我想在注销时清除所有内容。这样路由路径参数也应该被清除。
您在控制台中没有错误吗？在我看来，您的路由配置中应该有 redirectTo: '/home',，并且此路由配置与 /home 路由冲突。

标签： angular angular-ui-router

【解决方案1】：

试试

router.navigate(['/home'], {replaceUrl: true })`

【讨论】：

我已经尝试过了，但这没有帮助。 id 路径参数仍然设置。