部署于GitHub Pages的Angular 5应用能否获取route parameters？访问链接报错重定向

当然可以获取路由参数啦！你遇到的重定向到根域名并报错的问题，主要是因为GitHub Pages的静态服务特性和Angular路由配置不匹配导致的，咱们一步步来解决：

1. 先确认基础路径配置 #

部署到GitHub Pages的子目录（比如你的myapp）时，必须正确设置Angular的base href，否则路由会找不到正确的根路径：

• 构建项目时添加参数：

  ng build --prod --base-href "/myapp/"
  

• 或者直接修改src/index.html里的base标签：

  <base href="/myapp/">
  

2. 解决HTML5路由模式的404问题 #

如果你的Angular用的是默认的PathLocationStrategy（HTML5模式），GitHub Pages的静态服务器无法识别非根路径的URL，直接访问https://khex.github.io/myapp/1234时会返回404，进而导致重定向错误。这里有两种解决办法：

方法一：切换回Hash路由模式 #

在app.module.ts里配置路由使用HashLocationStrategy，这样URL会变成https://khex.github.io/myapp/#/1234，GitHub Pages能直接处理这种路径，不会有重定向问题：

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

const routes: Routes = [
  { path: ':id', component: YourTargetComponent } // 配置接收参数的路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] // 启用Hash模式
})
export class AppRoutingModule { }

方法二：自定义404页面适配HTML5模式 #

GitHub Pages支持自定义404页面，你可以创建一个404.html文件，内容和项目构建后的index.html完全一致，然后把它和构建产物一起推到GitHub Pages分支。这样当服务器找不到对应路径时，会加载404.html，Angular的路由就能接管并正确解析路由参数了。

3. 在组件中获取路由参数 #

不管用哪种路由模式，只要路由配置正确，都能在组件中通过ActivatedRoute获取参数：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅参数变化
    this.route.paramMap.subscribe(params => {
      const itemId = params.get('id');
      console.log('获取到的路由参数：', itemId); // 这里会输出1234
      // 后续根据参数做业务处理即可
    });
  }
}

最后部署验证 #

把构建好的产物（包括修改后的index.html或404.html）推到GitHub Pages的对应分支（比如gh-pages），之后再访问https://khex.github.io/myapp/1234（Hash模式下是https://khex.github.io/myapp/#/1234），就能正常加载页面并获取到路由参数啦！

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