angular - 重新加载后 Angular 2 url 的变化

Question

我的 angular 2 应用程序中有带有 queryParams 和 params 的 url。我遇到了问题:重新加载页面后，我的 url 发生了扭曲。

使用参数:

http://127.0.0.1:8000/albums?user_id=1

重新加载后:

http://127.0.0.1:8000/albums/?user_id=1

使用queryParams:

http://127.0.0.1:8000/albums/%3Aid;id=13

重新加载后:

http://127.0.0.1:8000/albums/%3Aid%3Bid%3D13

路由.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home/home.component';
import { LoginComponent }  from './components/login/login.component';
import { RegisterComponent }  from './components/register/register.component';
import { AlbumsComponent }  from './components/albums/albums.component';
import { AddAlbumComponent }  from './components/albums/add-album.component';
import { AddImageAlbumComponent }  from './components/albums/add-image-album.component';
import { AlbumDetailComponent }  from './components/albums/album-detail.component';
import { PhotosComponent }  from './components/photos/photos.component';
import { UsersComponent }  from './components/users/users.component';
import { AuthGuard } from './guards/auth.guard'

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'albums', component: AlbumsComponent, canActivate: [AuthGuard] },
    { path: 'add-album', component: AddAlbumComponent, canActivate: [AuthGuard] },
    { path: 'add-image-album/:id', component: AddImageAlbumComponent, canActivate: [AuthGuard] },
    { path: 'albums/:id', component: AlbumDetailComponent, canActivate: [AuthGuard] },
    { path: 'photos', component : PhotosComponent, canActivate: [AuthGuard] },
    { path: 'users', component : UsersComponent, canActivate: [AuthGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

使用参数导航:

[routerLink]="['/albums/:id', {id: album.id}]

使用queryParams 导航:

[queryParams]="{user_id: dataService.getCurrentUserId()}"

Answer 1

在对您重新加载的查询参数 url 进行 url 解码后，我得到了这个:

http://127.0.0.1:8000/albums/:id;id=13

它与您的原始网址基本相同，但参数完全经过网址编码。

更新:

如果您需要有关如何强制解码 url 的引用，您可以查看 this previous stack overflow question