Angular 7：存在查询参数时出现不需要的重定向

Question

我使用 @Angular/router 和 Angular 7。

我的目标是在我的页面之一上使用任意数量的（可选）查询参数，特别是在 /pages/components 中

我面临的问题是，每当我在网址栏中输入一些查询参数时，我就会被重定向到一个奇怪的位置。如果存在任何查询参数，此重定向会发生在我的所有页面上。

例子：

• http://localhost:4200/pages/dashboard（工作正常）
• http://localhost:4200/pages/components（工作正常）
• http://localhost:4200/pages/dashboard?hello=55&world=77：不工作。我被重定向到http://localhost:4200/pages/components/lo%3D55&world%3D77

我正在努力理解这个重定向。

看起来第一个查询参数的前 3 个字母被截断，查询字符串的其余部分被转义，并且由于某种原因，我总是以 /pages/components/something 结束，即使我输入的 url 完全是一个不同的页面（也许是因为组件页面是我唯一在 RouterModule 上带有参数的页面？）。

这是我的路由模块：

const appRoutes: Routes = [
  {path: '', component: LoginPageComponent, runGuardsAndResolvers:'always', pathMatch: 'full'},
  {path: 'pages/components', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/classes', component: ClassesPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/components/:id', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/dashboard', component: DashboardPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/users', component: UserAdminisitrationComponent, runGuardsAndResolvers: 'always', canActivate: [UserRoleGuardService]},
  {path: 'pages/reports', component: ReportsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/jobs', component: JobsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/material', component: MaterialPageComponent, runGuardsAndResolvers: 'always', canActivate: [UserRoleGuardService]},
  {path: '**', redirectTo: '/pages/dashboard', pathMatch: 'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 1

我在 Angular 8 上遇到了同样的问题，

我正在这样做：

this.returnUrl = this.route.snapshot.queryParams['returnUrl']
....
this.router.navigate([this.returnUrl]);

当 this.returnUrl = "/my-componenet?x=4"; 例如，我被重定向到“/my-componenet%3Fx%3D4”。

修复方法是使用 navigatorByUrl 代替

我还添加了一个decodeURI（以防万一）

this.returnUrl =decodeURI(this.route.snapshot.queryParams['returnUrl'] || '/login')
    ....
    this.router.navigateByUrl(this.returnUrl);