Angular 4路由禁用斜杠咨询：URL无斜杠带查询参数

这个问题我之前也踩过坑！Angular Router默认的行为确实会在根路径后面自动加上斜杠，导致你调用this.router.navigate([], { queryParams: { site: page}})时生成http://localhost:4200/?site=1，而不是你想要的无斜杠格式。修改base href为空字符串没用，因为这只影响应用的基准路径，不会改变路由序列化的核心逻辑。

下面给你两种可行的解决方案：

方案1：直接用navigateByUrl构造目标URL #

如果你的需求只是通过查询参数传递数据，不需要路由路径变化，这种方法简单直接：

保留现有查询参数的情况 #

如果你需要在已有查询参数的基础上添加/修改参数，可以先合并参数再生成URL：

// 获取当前URL的查询参数
const currentParams = this.router.parseUrl(this.router.url).queryParams;
// 合并新参数
const updatedParams = { ...currentParams, site: page };
// 生成查询字符串
const queryString = new URLSearchParams(updatedParams).toString();
// 导航到无斜杠的目标URL
this.router.navigateByUrl(`?${queryString}`);

首次设置查询参数的情况 #

如果当前URL没有查询参数，可以简化成：

this.router.navigateByUrl(`?site=${page}`);

这种方法的好处是无需额外配置，灵活度高，适合只处理查询参数的场景。

方案2：自定义URL序列化器（全局生效） #

如果你希望整个应用的路由都自动去掉根路径的斜杠，可以通过自定义序列化器来覆盖Angular的默认行为：

步骤1：创建自定义序列化器类 #

import { DefaultUrlSerializer, UrlTree } from '@angular/router';

export class NoSlashUrlSerializer extends DefaultUrlSerializer {
  serialize(tree: UrlTree): string {
    // 先调用Angular默认的序列化逻辑
    let url = super.serialize(tree);
    // 替换根路径后的斜杠：把 "/?" 格式改为 "?"
    return url.replace(/^\/\?/, '?');
  }
}

步骤2：在AppModule中注册这个序列化器 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, UrlSerializer } from '@angular/router';
import { NoSlashUrlSerializer } from './no-slash-url-serializer';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      // 你的路由配置，比如根路由指向AppComponent
      { path: '', component: AppComponent }
    ])
  ],
  declarations: [AppComponent],
  providers: [
    // 替换默认的URL序列化器
    { provide: UrlSerializer, useClass: NoSlashUrlSerializer }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成后，不管你用this.router.navigate([], { queryParams: ... })还是其他导航方式，生成的URL都会自动去掉根路径的斜杠，完美符合你想要的http://localhost:4200?item=2&filter=value&site=1格式。

注意：这种方式更适合全程只用查询参数传递数据、不需要路由路径的场景，如果之后需要添加带路径的路由，可能需要调整序列化器的正则逻辑，避免影响正常路径的渲染。

内容的提问来源于stack exchange，提问作者sreimers