Angular如何配置路由动态前缀 跳转页面自动拼接当前路径

你现在的配置把成功页路由和业务路由放在根路由平级，所以跳转后URL永远是/success，要实现当前业务路径自动拼接/success后缀的效果，有两种可落地的方案，都不需要改动你现有的成功页组件传参逻辑。

注意：你贴的代码里succes是拼写错误，下文统一修正为标准的success，避免出现路径匹配404问题。

方案1：业务模块追加子路由 + 相对跳转（改动最小，推荐） #

这个方案适配你现有的懒加载结构，改造成本极低：

• 首先删除根路由AppRoutingModule里平级配置的succes路由条目，不需要在根级单独挂载成功页路由。
• 在所有需要用到成功页的业务模块（比如ReviewModule、OrderModule）中导入SuccessModule，如果项目里有全局共享模块，也可以把SuccessComponent声明到共享模块并导出，不用每个业务模块单独导入。
• 在每个业务模块的路由配置数组末尾，追加一条子路由配置：

  // 以ReviewModule的路由配置为例，OrderModule同理追加即可
  const reviewRoutes: Routes = [
    { path: '', component: ReviewComponent }, // 你原有的评论页路由
    { path: 'success', component: SuccessComponent } // 追加的成功页子路由
  ];
  

  配置完成后，/review/success、/order/success这类路径就会自动匹配到对应业务模块下的成功页组件，完全符合你要的URL结构。
• 业务逻辑提交成功后跳转时，不要写死绝对路径，用Angular的相对路由跳转规则，自动基于当前路径拼接后缀：

  import { Router, ActivatedRoute } from '@angular/router';
  
  constructor(
    private router: Router,
    private route: ActivatedRoute // 注入当前激活的路由实例
  ) {}
  
  onSubmitSuccess() {
    // 相对当前路径跳转，自动拼接/success，不管当前在哪个业务页都能正确跳
    this.router.navigate(['success'], { 
      relativeTo: this.route,
      state: { /* 你要传给成功页的所有自定义数据，和之前传参逻辑一致 */ }
    });
  }
  

方案2：自定义路由匹配器（适合业务模块多，不想重复配置的场景） #

如果项目里需要跳成功页的业务模块超过5个，不想每个模块都重复写一行success子路由，可以用Angular内置的自定义路由匹配功能，在根路由一次性配置规则：

• 把根路由里原来拼写错误的succes配置替换成如下自定义匹配规则，注意这条配置必须放在根路由数组的最后，避免覆盖正常业务路由：

  // AppRoutingModule的根路由配置
  const routes: Routes = [
    // 你原有的review、order等所有业务路由配置放前面
    {
      path: 'review',
      loadChildren: () => import('./review/review.module').then(m => m.ReviewModule)
    },
    {
      path: 'order',
      loadChildren: () => import('./order/order.module').then(m => m.OrderModule)
    },
    // 最后放自定义匹配的成功页路由
    {
      matcher: (segments) => {
        // 匹配规则：路径最后一段为success，且前面至少有1段业务路径
        if (segments.length >= 2 && segments.at(-1)?.path === 'success') {
          return { consumed: segments, posParams: {} };
        }
        return null;
      },
      loadChildren: () => import('./success/success.module').then(m => m.SuccessModule)
    }
  ];
  

• SuccessModule里的原有路由配置不用改，保持{ path: '', component: SuccessComponent }即可。
• 跳转时直接获取当前URL拼接后缀做绝对跳转即可，不用依赖当前ActivatedRoute：

  onSubmitSuccess() {
    const currentPath = this.router.url.split('?')[0]; // 去掉URL上可能带的查询参数
    this.router.navigateByUrl(`${currentPath}/success`, {
      state: { /* 传给成功页的自定义数据 */ }
    });
  }
  

  这个配置下不管是/review/success、/order/detail/success这类多级路径，只要最后一段是success都会正确加载成功页组件。

避坑提示 #

• 不要在全局单例服务里注入ActivatedRoute获取当前路径，服务里注入的ActivatedRoute是根路由实例，拿不到当前页面的子路由路径，会导致相对跳转失效。
• 成功页本身要保持通用性，不要写死依赖某一个业务路径的逻辑，所有展示数据都通过路由state或者全局服务传入即可。

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