Angular 13路由匹配失败求助：无法匹配路由'home/userlist'

问题根源 #

你遇到的Cannot match any routes. URL Segment: 'home/userlist'错误，核心问题有两个：

• 路由结构配置错误：你把WorksComponent的父路径设为空字符串，这会和根路径的重定向规则冲突，子路由userlist等也没有挂载到正确的父路径下。
• 相对路由链接错误：在HomeComponent（当前路径/home）里使用相对路径routerLink="userlist"，Angular会自动拼接成/home/userlist，但你的路由配置里根本没有这个路径。

修复步骤 #

1. 修正路由配置（app-routing.module.ts） #

把WorksComponent的父路径改为works，同时调整子路由的重定向规则，确保子路由正确挂载：

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

import { HomeComponent } from './p/home/home.component';
import { WorksComponent } from './p/works/works.component';
import { CenzorComponent } from './p/works/cenzor/cenzor.component';
import { UserlistComponent } from './p/works/userlist/userlist.component';
import { TasklistComponent } from './p/works/tasklist/tasklist.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  // 将父路径改为works，替代原来的空字符串
  { 
    path: 'works', 
    component: WorksComponent,
    children: [
      // 子路由默认重定向到任意一个子组件，这里选cenzor示例
      { path: '', redirectTo: 'cenzor', pathMatch: 'full' },
      { path: 'cenzor', component: CenzorComponent },
      { path: 'userlist', component: UserlistComponent },
      { path: 'tasklist', component: TasklistComponent },
    ] 
  },
];

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

2. 给WorksComponent添加子路由出口 #

确保WorksComponent的模板（works.component.html）里包含<router-outlet></router-outlet>，这样子组件（Cenzor、Userlist等）才能正确渲染在WorksComponent内部：

<!-- works.component.html -->
<p>Works 组件内容</p>
<router-outlet></router-outlet>

3. 修正HomeComponent里的路由链接 #

把相对路径改成绝对路径，指向/works下的子路由：

<div class="container-fluid d-flex justify-content-around">
    <div class="card" style="width: 18rem;">
        <img src="../../assets/images/1.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title text-danger text-center">list of prohibited words</h5>
          <!-- 修正为绝对路径 /works/cenzor -->
          <a class="btn btn-success" routerLink="/works/cenzor">censor</a>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <img src="../../assets/images/2.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title text-danger text-center">angular task list</h5>
          <!-- 修正为绝对路径 /works/tasklist -->
          <a class="btn btn-success" routerLink="/works/tasklist">tasklist</a>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <img src="../../assets/images/3.jpg" class="card-img-top" alt="...">
        <div class="card-body bg-light">
          <h5 class="card-title text-danger text-center">Angular users list</h5>
          <!-- 修正为绝对路径 /works/userlist -->
          <a class="btn btn-success " routerLinkActive="active" routerLink="/works/userlist">userlist</a>
        </div>
      </div>
</div>

验证效果 #

修改完成后重启项目：

• 访问根路径会自动重定向到/home
• 点击Home页面的按钮会跳转到/works/userlist等路径，此时WorksComponent会渲染，其子组件也会在对应的路由出口显示，不会再出现路由匹配错误。

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