Angular 7中如何阻止哈希(#)前自动添加斜杠？锚点跳转异常解决

这问题我之前帮人排查过，Angular的路由策略在这里搞了点小“手脚”——默认的PathLocationStrategy会自动调整URL结构，把锚点哈希前加上斜杠，导致两次点击的URL不匹配触发页面重载。给你几个靠谱的解决办法：

1. 切换到HashLocationStrategy（推荐） #

Angular默认使用PathLocationStrategy（依赖HTML5 History API），换成HashLocationStrategy后，整个应用的路由都会基于哈希值，锚点的哈希也会被正确处理，不会再出现自动加斜杠的情况。

配置方法很简单，在你的AppRoutingModule里修改路由配置，添加useHash: true：

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

const routes: Routes = [
  // 这里放你的现有路由配置
];

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

设置完成后，你的应用URL本身就会以/#开头，点击<a href="#customer">Customers</a>后，URL会变成http://www.example.com/#customer，再次点击时URL不会变化，也就不会触发页面重载了。

2. 手动处理锚点跳转，绕过Angular路由拦截 #

如果你不想修改整个应用的路由策略，可以直接用原生JS处理锚点点击事件，阻止Angular的默认行为，手动控制滚动和URL哈希：

首先修改模板中的链接，添加点击事件绑定：

<a href="#customer" (click)="scrollToAnchor($event)">Customers</a>

然后在对应的组件类中实现scrollToAnchor方法：

scrollToAnchor(event: Event) {
  // 阻止Angular的路由处理逻辑
  event.preventDefault();
  
  // 获取锚点ID
  const targetId = (event.target as HTMLAnchorElement).hash.slice(1);
  const targetElement = document.getElementById(targetId);
  
  if (targetElement) {
    // 滚动到目标元素，smooth参数可选，实现平滑滚动
    targetElement.scrollIntoView({ behavior: 'smooth' });
    // 手动更新URL哈希，保持和锚点一致
    window.history.pushState({}, '', `#${targetId}`);
  }
}

这种方式完全绕过了Angular的路由干预，直接由原生JS控制，不会出现哈希前加斜杠的问题。

3. 排查全局事件或路由守卫的影响 #

有时候全局的路由事件监听、自定义路由守卫或者第三方库可能会意外修改URL结构，你可以检查一下：

• AppComponent中是否监听了Router.events事件
• 是否有自定义的RouteReuseStrategy或路由守卫逻辑
• 有没有引入修改URL的第三方插件

如果发现这类代码，排查是否是它们导致了URL的自动调整。

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