重定向时角度路由到错误的路径答案

【问题标题】：Angular Routing to the wrong path when redirected重定向时角度路由到错误的路径
【发布时间】：2020-06-12 13:29:00
【问题描述】：

Angular 8.2.14

所以我的角度路由有问题，这是我的路由模块中的代码：

  { 
    path: "hero", 
    component: HeroListComponent, 
    canActivate: [AuthGuard], 
    children: [
      { 
        path: "new", 
        component: NewHeroComponent
      },
      { 
        path: ":id", 
        component: HeroComponent, 
        canActivate: [HeroGuard]
      }
    ],
  },

我的问题是我在另一个网站上有一个按钮，可以将我重定向到我的 Angular 应用程序，当单击该按钮时，它会打开一个带有如下 URL 的新选项卡：

http://localhost:4200/hero/new?power=123&attr=123%20456%20789&city=123&rt=1&rate=80

当用户已经登录时，路由模块可以正常工作并正确地将他带到 NewHeroComponent 并正确处理查询的参数。

当用户未登录时会出现问题并且必须通过身份验证过程，通常重定向对其他组件没有任何问题，但由于某种原因在这种情况下路由器尝试打开 HeroComponent。

当我在我的 HeroGuard 中记录 ActivatedRouteSnapshot（不应该被调用但仍然如此）时，我得到了这个：

params:
  id: "new?power=123&attr=123%20456%20789&city=123&rt=1&rate=80"

重定向非常简单，当用户未登录时，链接保留在 localStorage 中，如果我的重定向的 localStorage 键是使用 this.router.navigate([route]).

提前感谢您的帮助！

【问题讨论】：

控制台记录传递给导航的路线。
这个不错，"/hero/new?power=123&attr=123%20456%20789&city=123&rt=1&rate=80"
调用它的当前 url 是什么？
以及在正常情况下你去哪个网址激活 herocomponent。
在正常登录的情况下，您是否可以正常访问 newherocomponent？

标签： angular angular-routing angular-router-guards

【解决方案1】：

经过更多研究，我发现我使用了错误的功能进行导航。

问题：?在调用 router.navigate([route]) 时，url 中的 %3F 被更改，结果是角度认为它是一个参数。

解决办法：我把 router.navigate([route]) 改成了 router.navigateByUrl(route)！

希望这能帮助像我这样的菜鸟！ :)

【讨论】：

你可以用router.navigate实现同样的效果：router.navigate([route], { queryParams: { ... } })