Dart Angular 5子路由重定向如何保留父路由参数？

我来帮你搞定这个需求——把/u/2/object/123这类子路由重定向到/u/2/list，同时完美保留父路由的:index参数。下面分常见框架给出具体实现，核心思路都是利用相对路径重定向来复用父路由的上下文参数：

假设是Angular路由场景 #

首先看完整的路由配置结构，关键是在子路由里用相对路径设置重定向：

const routes: Routes = [
  {
    path: 'u/:index', // 父路由，带index参数
    component: ParentComponent,
    children: [
      { path: 'list', component: ListComponent }, // 目标子路由
      { path: 'object/:id', component: ObjectComponent }, // 原需要重定向的子路由
      // 通配符重定向：所有未匹配的子路由都转到list
      { path: '**', redirectTo: 'list' }
    ]
  }
];

假设是Vue Router场景 #

写法类似，同样用相对路径的重定向规则：

const routes = [
  {
    path: '/u/:index',
    component: ParentComponent,
    children: [
      { path: 'list', component: ListComponent },
      { path: 'object/:id', component: ObjectComponent },
      { path: '*', redirect: 'list' } // Vue里用*作为通配符
    ]
  }
];

关键注意点 #

• 用相对路径而非绝对路径：直接写redirectTo: 'list'（Angular）或redirect: 'list'（Vue），框架会自动基于当前父路由的上下文（包括:index参数）生成目标路径，不需要硬编码/u/:index/list，这样父路由路径变更时重定向规则不用跟着改。
• 通配符路由放最后：一定要把通配符(**/*)路由放在子路由数组的最后，确保list和object/:id这些具体路由先被匹配，避免正常路由被误重定向。
• 参数自动保留：因为重定向是在父路由的子路由范围内执行的，框架会自动把当前父路由的:index参数值（比如示例中的2）带入目标路径，最终得到/u/2/list。

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