Angular点击routerLink导航后地址栏不跳转停留首页问题求助

按以下优先级逐一排查，即可解决点击导航链接地址栏不更新、页面停留在首页的问题：

• 第一优先级：检查根模块是否正确导入路由模块
  这是该类问题最高发的原因。打开src/app/app.module.ts，确认@NgModule的imports数组中已经引入AppRoutingModule，参考正确写法：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  // 必须引入你写好的路由模块
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  // 其他业务组件的引入省略
  
  @NgModule({
    declarations: [
      AppComponent,
      CategoriesListComponent,
      CreateCategoriesComponent,
      // 其他组件声明
    ],
    imports: [
      BrowserModule,
      AppRoutingModule, // 这一行绝对不能漏
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  如果漏加AppRoutingModule，模板里的routerLink指令完全不会生效，写了routerLink的a标签因为没有原生href属性，会变成点击无反应的普通元素，自然不会触发跳转、地址栏也不会变化。

• 第二优先级：检查index.html的基础路径配置
  打开src/index.html，确认<head>标签内存在<base href="/">配置：

  <!doctype html>
  <html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>你的项目名</title>
    <base href="/"> <!-- 必须有这一行，Angular路由依赖它解析路径 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
  </html>
  

  缺失这行配置会导致路由跳转的路径解析完全异常。

• 第三优先级：修复模板DOM结构错误
  你贴出的app.component.html代码中存在孤立的</nav>闭合标签，缺少对应的<nav>开标签，DOM结构错乱可能导致事件绑定失效，补全即可：

  <!-- 补全nav开标签，class名根据你自己的样式需求调整 -->
  <nav class="navbar navbar-expand">
    <ul class = "navbar-nav">
        <li class = "nav-item">
            <a routerLink="/categories" class="nav-link" ariaCurrentWhenActive="page" >Liste des catégories</a>
        </li>
        <li class = "nav-item">
            <a routerLink="/create-categories"  class="nav-link" ariaCurrentWhenActive="page" >Ajout catégorie</a>
        </li>
    </ul>
  </nav>
  
  <div class = "container">
    <router-outlet></router-outlet>
  </div>
  

• 其他校验点

  • 确认导航链接的父元素（li、ul、nav）没有绑定自定义click事件，且事件中错误调用event.preventDefault()或event.stopPropagation()阻断了routerLink的默认跳转逻辑
  • 你当前贴出的app-routing-module.ts路由配置本身没有语法问题，不需要额外调整。

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