如何在Angular中创建友好型路由？

嘿，这个需求太实用了！我来给你一步步拆解怎么实现example.com/my-post-title这种友好的slug路由，替代传统的ID路由：

1. 先搞定数据层：确保每个内容有唯一的Slug字段 #

首先你得保证你的帖子数据里有一个唯一的slug字段，这个字段通常是从标题生成的（比如把"我的第一篇帖子"转成"my-first-post"）。不管是前端生成还是后端生成，核心是每个帖子的slug不能重复。

比如定义Post接口：

export interface Post {
  id: number;
  title: string;
  slug: string; // 关键字段！
  content: string;
  // 其他字段...
}

后端也要提供根据slug查询帖子的接口，比如GET /api/posts/slug/:slug。

2. 配置Angular路由 #

接下来在你的路由配置文件（比如app-routing.module.ts）里定义slug路由。注意把这个路由放在更具体的路由之后，避免它拦截其他路由（比如首页、关于页）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PostDetailComponent } from './post-detail/post-detail.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // 首页路由放在前面
  { path: ':slug', component: PostDetailComponent }, // 这里就是slug路由
  { path: '**', component: NotFoundComponent } // 404路由最后
];

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

如果想给帖子路由加前缀（比如example.com/posts/my-post-title），就把路由改成{ path: 'posts/:slug', component: PostDetailComponent }，逻辑更清晰。

3. 在详情组件中获取Slug并加载数据 #

在PostDetailComponent里，通过ActivatedRoute获取URL里的slug参数，然后调用服务去后端拿对应的帖子数据：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostService } from '../services/post.service';
import { Post } from '../models/post';

@Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.component.html',
  styleUrls: ['./post-detail.component.css']
})
export class PostDetailComponent implements OnInit {
  post: Post | undefined;

  constructor(
    private route: ActivatedRoute,
    private postService: PostService
  ) { }

  ngOnInit(): void {
    // 获取slug参数
    this.route.paramMap.subscribe(params => {
      const slug = params.get('slug');
      if (slug) {
        // 根据slug请求帖子数据
        this.postService.getPostBySlug(slug).subscribe(post => {
          this.post = post;
          // 这里还可以设置页面标题，优化SEO
          document.title = post.title;
        }, error => {
          // 处理slug不存在的情况，比如跳转到404
          console.error('帖子不存在:', error);
          // 可以用this.router.navigate(['/404'])跳转
        });
      }
    });
  }
}

对应的PostService示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Post } from '../models/post';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private apiUrl = 'http://your-api-url.com/api/posts';

  constructor(private http: HttpClient) { }

  getPostBySlug(slug: string): Observable<Post> {
    return this.http.get<Post>(`${this.apiUrl}/slug/${slug}`);
  }
}

4. 在列表页生成友好的路由链接 #

当你在帖子列表组件里展示所有帖子时，用routerLink绑定到slug即可：

<!-- 帖子列表模板 -->
<div *ngFor="let post of posts" class="post-item">
  <h2><a [routerLink]="[post.slug]">{{ post.title }}</a></h2>
  <!-- 如果是带前缀的路由，就写成[routerLink]="['posts', post.slug]" -->
  <p>{{ post.content | slice:0:100 }}...</p>
</div>

几个额外的注意事项 #

• Slug唯一性：后端必须保证每个帖子的slug不重复，否则会出现多个帖子对应同一个URL的问题。
• Slug生成规则：建议统一用小写字母、连字符代替空格，去掉特殊字符（比如把"Hello! World?"转成"hello-world"），前端可以自己写个工具函数生成，后端也可以在创建帖子时自动生成。
• 404处理：如果用户访问了不存在的slug，要跳转到404页面，或者在组件里提示"帖子不存在"。
• 路由顺序：一定要把slug路由放在更具体的路由后面，比如首页、关于页这些固定路径的路由要先定义，否则slug路由会拦截所有请求。

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