如何创建带查询参数的Angular路由直接访问链接？

正确的直接链接格式 #

你需要的有效链接应为：

https://myapp.com/s/m?test=123&test2=12314

之前链接无效的原因 #

• https://myapp.com/s/m/?test=123&test2=12314：Angular Router默认严格匹配路径，/s/m和/s/m/会被识别为两个不同路径，未配置兼容规则时无法匹配目标路由。
• https://myapp.com/index.html/s/m?test=123&test2=12314：格式错误，index.html是SPA入口文件，路由路径需直接跟随域名，服务器会将index.html/s/m视为静态文件路径，导致无法找到对应资源。

关键配置步骤 #

1. 服务器端重写规则配置
   Angular SPA的所有路由请求都需转发到index.html，否则直接访问子路径会返回404，根据服务器类型配置：

   • Nginx：在站点配置的location /块中添加：

     try_files $uri $uri/ /index.html;
     

   • Apache：启用mod_rewrite模块后，在.htaccess中添加：

     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
     

   • IIS：通过URL重写模块创建规则，将所有非静态文件请求转发到index.html。

2. Angular Router路由检查
   确保路由模块中正确定义/s/m路由：

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { TargetComponent } from './path/to/target.component';
   import { ExistingComponent } from './path/to/existing.component';
   
   const routes: Routes = [
     // 其他路由配置
     { path: 's/m', component: TargetComponent },
     { path: 's/m/:id', component: ExistingComponent } // 对应原有的/s/m/12345路径
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

   若需兼容末尾斜杠，可添加pathMatch: 'prefix'，但推荐保持路径一致性以避免混淆。

3. 组件中获取查询参数
   在目标组件中，通过ActivatedRoute获取传入的查询参数：

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   
   @Component({
     selector: 'app-target',
     templateUrl: './target.component.html',
     styleUrls: ['./target.component.css']
   })
   export class TargetComponent implements OnInit {
     constructor(private route: ActivatedRoute) { }
   
     ngOnInit(): void {
       this.route.queryParams.subscribe(params => {
         const test = params['test'];
         const test2 = params['test2'];
         // 处理参数逻辑
       });
     }
   }
   

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