如何让静态站点链接跳转至带指定参数的Angular应用路由

一、修正原生HTML链接写法 #

你猜测的哈希模式链接思路是对的，注意拼写修正（原链接里的questons应为questions），正确格式如下：

<a href="https://example.com/index.html#/job/plumber/questions/1">水管工问题1</a>

如果想要更简洁的无#URL，可改用Angular的HTML5路由模式，配置方法见下文。

二、确认Angular路由配置 #

你的现有路由已经支持参数化匹配，无需逐个添加几百条路由，参数会自动解析：

const routes: Routes = [
  {path: '', component: QuestionPageComponent},
  {path: 'job/:jobId/questions/:id', component: QuestionPageComponent},
  {path: 'result', component: ResultPageComponent},
  // {path: '**', component: ErrorPageComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 默认哈希模式，启用HTML5模式需加{useHash: false}
  exports: [RouterModule]
})
export class AppRoutingModule { }

在QuestionPageComponent中通过ActivatedRoute获取路由参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const jobId = params.get('jobId'); // 获取到plumber
    const id = params.get('id'); // 获取到1
    // 此处根据参数加载对应问题内容
  });
}

三、调整Nginx配置（核心步骤） #

当前你的Nginx默认指向原生站点的main.html，需配置路由转发，让Angular路由请求都指向index.html，同时保留原生站点访问：

server {
    listen 443 ssl;
    ssl_certificate #;
    ssl_certificate_key #;
    server_name example.com www.example.com;
    root   /home/example;
    
    # 原生站点默认入口
    index main.html;

    # 转发所有Angular路由请求到index.html
    location /job/ {
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    location /result {
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 其他请求走原生站点
    location / {
        try_files $uri $uri/ =404;
    }
}

如果启用HTML5模式（无#URL），需修改Angular路由配置为RouterModule.forRoot(routes, {useHash: false})，并把Nginx配置改为通用规则：

# 所有非静态资源和非main.html的请求，都转发到Angular的index.html
location / {
    try_files $uri $uri/ /index.html;
}
# 单独保留原生站点入口
location = /main.html {
    try_files $uri =404;
}

四、两种路由模式对比 #

• 哈希模式（默认）：URL带#，无需复杂后端配置，快速实现，即你最初设想的格式。
• HTML5模式：URL更简洁美观（如https://example.com/job/plumber/questions/1），但必须配置后端路由重写，避免刷新页面时出现404。

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