Angular 5中<a routerLink>点击触发意外页面刷新问题求助

我之前也碰到过一模一样的情况！结合你使用的Angular Router 5.2.8和Angular CLI 1.7.3，大概率是下面几个配置或代码问题导致的，给你梳理几个排查和修复方向：

• 检查<a>标签的属性冲突
  最常见的原因就是给带routerLink的锚标签同时加了href属性。比如这种写法：

  <a href="/dashboard" routerLink="/dashboard">仪表盘</a>
  

  浏览器会优先触发原生的href跳转逻辑，直接刷新页面。解决方法很简单：只保留routerLink属性，删掉多余的href。

• 确认RouterModule的导入配置
  检查app.module.ts里是否正确导入了RouterModule.forRoot(routes)，避免重复导入或者错误使用forChild：

  // app.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule } from '@angular/router';
  import { routes } from './routes.module'; // 你的路由定义文件
  
  @NgModule({
    declarations: [/* 你的组件 */],
    imports: [
      BrowserModule,
      RouterModule.forRoot(routes) // 必须用forRoot初始化根路由
      // 不要在这里重复导入RouterModule或者用forChild
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 排查路由策略配置
  Angular 5默认使用PathLocationStrategy（HTML5路由模式），如果你手动切换到HashLocationStrategy，要确保配置正确，避免因为路由模式不兼容导致的刷新：

  // 在routes.module.ts或AppModule中配置
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
    // 你的路由规则
  ];
  
  // 如果使用Hash模式，要显式配置
  export const routing = RouterModule.forRoot(routes, { useHash: true });
  

• 检查全局点击事件干扰
  有些自定义脚本或者第三方库会给所有<a>标签绑定额外的点击事件，强制触发原生跳转。可以打开浏览器控制台的Elements标签，选中目标<a>标签，查看Event Listeners面板，看看有没有多余的点击事件绑定；或者临时禁用第三方脚本，测试是否还会刷新。

• 版本补丁修复（可选）
  Angular 5.2.8存在一些已知的路由小bug，你可以尝试升级到同大版本的最新补丁（比如5.2.11），修复可能存在的兼容性问题：

  npm install @angular/router@5.2.11 --save
  

另外，测试时可以打开浏览器控制台的Network标签：如果是Angular路由正常跳转，不会出现HTML文档的请求；如果是页面刷新，会看到整个页面的加载请求，这样能快速定位问题根源。

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