Angular路由重定向未加载预期组件的原因及解决方法

你当前的路由配置中，path: 'old'的匹配逻辑无法正确处理带后续路径的请求（比如/old/a）。当访问这类路径时，Angular会匹配old路由并执行redirectTo: '..'，地址栏会被改写为/a，但这个重定向操作没有触发Angular重新启动完整的路由匹配流程，导致当前导航仍沿用之前的路径解析结果，最终匹配到通配符路由加载PageNotFoundComponent。刷新页面时，浏览器直接请求/a，Angular重新初始化路由匹配，才能正确加载对应组件。

你需要配置能匹配所有/old/开头路径的路由，并将其重定向到去掉old前缀的对应路径，以下是两种可靠实现方式：

方式一：通配符参数捕获路径 #

直接捕获old后的所有路径片段，重定向到根目录下的对应路径：

const routes: Routes = [
  // 匹配所有 /old/xxx 格式的路径，重定向到 /xxx
  {
    path: 'old/:route**',
    redirectTo: '/:route',
    pathMatch: 'full'
  },
  { path: 'a', component: AComponent },
  { path: 'b', component: BComponent },
  { path: '**', component: PageNotFoundComponent }
];

• path: 'old/:route**'中的**是通配符参数，会捕获old/之后的所有路径内容；
• redirectTo: '/:route'将捕获到的路径片段拼接到根路径后，实现精准重定向。

方式二：父路由+子路由通配符 #

通过嵌套路由匹配所有old下的子路径，再重定向到对应根路径：

const routes: Routes = [
  {
    path: 'old',
    children: [
      // 匹配 old 下的所有子路径，重定向到根目录对应路径
      {
        path: '**',
        redirectTo: '../../',
        pathMatch: 'full'
      }
    ]
  },
  { path: 'a', component: AComponent },
  { path: 'b', component: BComponent },
  { path: '**', component: PageNotFoundComponent }
];

这里的redirectTo: '../../'是相对路径，会从/old/a的位置回到根目录，同时自动保留子路径片段，最终重定向到/a。

两种方式都能让/old/a、/old/b直接重定向并正确加载对应组件，无需手动刷新。

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