Angular 5路由配置：如何让routerLink保留尾斜杠？

刚好我之前帮客户做过Angular升级旧站的项目，完全懂你这个要保留旧路由格式的SEO痛点！下面是我亲测有效的方案，能让routerLink乖乖保留尾斜杠，同时兼容.html后缀的路由：

1. 自定义UrlSerializer强制保留尾斜杠 #

Angular默认的UrlSerializer会自动砍掉尾斜杠，所以我们得自己写一个序列化器来覆盖这个行为，同时兼顾.html后缀的路由：

先创建一个自定义序列化器文件trailing-slash-url-serializer.ts：

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

export class TrailingSlashUrlSerializer extends DefaultUrlSerializer {
  parse(url: string): UrlTree {
    // 规则：如果路径既没有尾斜杠也不是.html结尾，就补上尾斜杠
    if (!url.endsWith('/') && !url.endsWith('.html')) {
      url += '/';
    }
    return super.parse(url);
  }

  serialize(tree: UrlTree): string {
    let path = super.serialize(tree);
    // 序列化输出时同样确保格式符合要求
    if (!path.endsWith('/') && !path.endsWith('.html')) {
      path += '/';
    }
    return path;
  }
}

然后在根路由模块（比如AppRoutingModule）里注册这个序列化器：

import { NgModule } from '@angular/core';
import { RouterModule, UrlSerializer } from '@angular/router';
import { TrailingSlashUrlSerializer } from './trailing-slash-url-serializer';
import { routes } from './app.routes';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    { provide: UrlSerializer, useClass: TrailingSlashUrlSerializer }
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 配置路由规则兼容旧路径 #

接下来要在路由配置里对应上旧站的两种路径格式，同时可以加个重定向让不带斜杠的路径跳转到带斜杠的版本，更SEO友好：

const routes: Routes = [
  // 匹配带尾斜杠的旧路由
  { path: 'my/route/', component: MyRouteComponent },
  // 匹配带.html后缀的旧路由
  { path: 'my/route.html', component: MyRouteHtmlComponent },
  // 可选：把不带斜杠的路径重定向到带斜杠的版本，避免重复内容
  { path: 'my/route', redirectTo: 'my/route/', pathMatch: 'full' }
];

3. routerLink的正确使用 #

配置完之后，用routerLink的时候直接写完整的旧路径格式就行，Angular会自动保留尾斜杠或.html后缀：

<!-- 生成的链接是 /my/route/ -->
<a routerLink="/my/route/">带尾斜杠的页面</a>

<!-- 生成的链接是 /my/route.html -->
<a routerLink="/my/route.html">带HTML后缀的页面</a>

额外提醒：服务器端配置 #

如果你的应用是部署在Nginx、Apache这类服务器上，别忘了配置服务器规则，确保带尾斜杠和.html的路径都能正确指向Angular的入口文件，避免404错误。比如Nginx可以这么配置：

location / {
  try_files $uri $uri/ /index.html;
}

要是用Apache的话，也记得启用mod_rewrite并配置对应的重写规则。

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