重载后Angular 2的URL更改

Question

我在我的Angular 2应用程序中有带有queryParams和params的URL。但是我遇到了一个问题：重新加载页面后，我的URL变形了。

使用params：

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

routes.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()}"

- Rodion

---

似乎你的导航代码有问题。你能展示一下处理导航的组件吗？ - Paul Samsotha

我有同样的问题。 - aycanadal

Answer 1

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

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

它本质上与您的原始网址相同，但参数已完全进行了URL编码。

更新：

如果您需要有关如何强制解码网址的参考资料，可以查看此前的Stack Overflow问题

- Judd Franklin

Answer 2

在RouteLink中直接传递参数，例如请参考下面的代码

[routerLink]="[/albums,nav.param]"

在路由中声明如下

{ path: 'albums/:id', component: AlbumsComponent }

在 albumscomponent.ts 中，使用 activateroute 读取 URL 参数的值。

- Vignesh