Angular v12应用配置带国家码前缀的基础路由及相关问题解决

问题1：无需所有路由模块添加:countryCode参数的实现方案 #

核心思路是将:countryCode作为顶层公共父路由，所有业务路由作为其子路由挂载，参数会自动从父路由继承，无需在业务路由中重复声明：

1. 修改app-routing.module.ts路由配置：

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    canActivate: [CountryCodeGuard], // 新增路由守卫处理国家码逻辑
    children: [
      {
        path: ':countryCode',
        children: [
          { path: '', component: HomeComponent }, // 匹配 /us 根路径
          // 业务路由直接在此处导入即可，无需额外加国家码参数
          { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
          // 其他业务路由同理添加
        ]
      }
    ]
  },
  // 兜底路由，匹配所有不带国家码的非法路径
  { path: '**', redirectTo: '' }
];

2. 业务模块内获取国家码的方式：所有子组件无需调整自身路由配置，直接从根路由获取参数即可：

// 任意业务组件中获取国家码示例
constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.root.params.subscribe(params => {
    const currentCountryCode = params.countryCode;
    // 处理业务逻辑
  });
}

问题2：修改URL国家码后丢失后续路径的解决方案 #

该问题的核心原因是你在DefaultLayoutComponent和HomeComponent的构造函数中硬编码跳转到国家码根路径，没有保留URL后续路径。优化方案如下：

1. 删除两个组件构造函数中所有手动路由跳转的逻辑，改为用路由守卫统一处理国家码校验、localStorage更新、路径重定向逻辑：
   新建country-code.guard.ts：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { LocalStorageService } from './local-storage.service'; // 替换成你实际的服务路径

@Injectable({ providedIn: 'root' })
export class CountryCodeGuard implements CanActivate {
  constructor(
    private router: Router,
    private localStorageService: LocalStorageService
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    const validCountryCodes = ['us', 'sa', 'uk']; // 替换成你实际支持的国家码列表
    const urlSegments = state.url.split('/').filter(Boolean);
    const urlCountryCode = urlSegments[0];
    const savedCountryCode = this.localStorageService.getStorage('selectedCountry') || 'us';

    // 场景1：URL中无国家码/国家码不合法，跳转到带国家码的完整路径
    if (!urlCountryCode || !validCountryCodes.includes(urlCountryCode)) {
      const restPath = urlSegments.join('/');
      return this.router.parseUrl(`/${savedCountryCode}/${restPath}`);
    }

    // 场景2：URL国家码合法，更新本地存储的国家码
    if (urlCountryCode !== savedCountryCode) {
      this.localStorageService.setStorage('selectedCountry', urlCountryCode);
    }

    // 直接放行，无需额外跳转
    return true;
  }
}

2. 把新增的守卫添加到app-routing.module的对应路由上（已在问题1的路由配置示例中标注）。

完成以上修改后，手动修改URL中的国家码时，只要国家码合法就会直接放行，保留后续路径，同时自动更新localStorage中的国家码记录。

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