Angular 4旧哈希URL重定向至新无哈希URL失效问题

我来帮你梳理下问题根源和解决办法～

首先得明确为什么你原来的路由规则不生效：Angular Router的path属性匹配的是URL中域名之后、锚点（#）之前的路径部分。当用户访问带#的URL（比如http://tvsntorq.com/#Colour）时，浏览器会把#Colour当作锚点而非路径的一部分，所以Angular Router根本不会匹配到你写的path: '#Colour'这条规则——它看到的实际路径是空字符串。

那该怎么处理这些旧的哈希链接呢？你可以在客户端初始化时手动检测锚点并完成重定向，具体步骤如下：

步骤1：在根组件中添加锚点检测逻辑 #

修改你的AppComponent，在组件初始化时检查当前URL的锚点部分，然后导航到对应的无哈希路径：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    const hash = window.location.hash;
    // 如果存在有效锚点内容
    if (hash && hash.length > 1) {
      // 去掉开头的#，并转成小写（匹配你新路由的小写路径）
      const targetRoute = hash.slice(1).toLowerCase();
      // 使用replaceUrl: true，避免在浏览器历史记录中留下旧的哈希URL
      this.router.navigate([targetRoute], { replaceUrl: true });
    }
  }
}

步骤2：确保新路由规则配置正确 #

你的新路由应该已经配置了对应的小写路径，比如：

const routes: Routes = [
  { path: 'price', component: PriceComponent },
  { path: 'colour', component: ColourComponent },
  // 其他路由规则...
];

额外优化建议 #

• 如果旧哈希URL存在大小写混合、带额外参数等变体，可以在targetRoute的处理逻辑里做更灵活的适配；
• 若你是通过服务器托管应用（比如Nginx、Apache），也可以在服务器层面配置重定向规则，把带#的URL直接重写到无哈希路径，这样能在请求到达Angular之前就完成跳转，体验更流畅。比如Nginx可以这样配置：

  rewrite ^/#(.*)$ /$1 permanent;
  

  不过这种方式需要确保服务器已经配置了无哈希路由的fallback（将所有请求指向index.html）。

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