Angular 5组件路由链接错误：Dashboard模块路由配置修正求助

看起来你遇到了路由跳转路径不匹配的问题，别担心，咱们一步步排查解决：

首先检查Dashboard模块的路由配置（routing.ts） #

最常见的原因是路由嵌套关系没配置对，导致Admin的add路由没有正确关联到admin父路径下。你可以参照下面的正确配置调整：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件
import { AdminComponent } from './admin/admin.component';
import { SuperuserComponent } from './superuser/superuser.component';
import { AdminAddComponent } from './admin/admin-add/admin-add.component'; // 替换成你实际的Add组件路径
import { SuperuserAddComponent } from './superuser/superuser-add/superuser-add.component';

const routes: Routes = [
  {
    path: '', // 这里是空，因为App路由里应该已经配置了`path: 'dashboard'`指向这个模块
    children: [
      // Admin路由及子路由
      { 
        path: 'admin', 
        component: AdminComponent,
        children: [
          { path: 'add', component: AdminAddComponent } // 把Admin的Add路由嵌套在admin下
        ]
      },
      // Superuser路由及子路由
      { 
        path: 'superuser', 
        component: SuperuserComponent,
        children: [
          { path: 'add', component: SuperuserAddComponent } // Superuser的Add路由嵌套在superuser下
        ]
      },
      // 其他路由请放在最后，比如通配符路由
      // { path: '**', redirectTo: 'admin' }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

然后检查组件内的跳转代码 #

另一个大概率的错误是Admin组件里的跳转路径写错了，或者相对路径使用不当：

Admin组件的Add按钮跳转代码（二选一即可） #

方式1：使用绝对路径（最直接，不容易出错）

import { Router } from '@angular/router';

constructor(private router: Router) {}

onAddButtonClick() {
  // 明确跳转到admin的add路径
  this.router.navigate(['/dashboard/admin/add']);
}

方式2：使用相对路径（推荐，适配父路由变化）

这种方式需要依赖ActivatedRoute来获取当前路由上下文：

import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) {}

onAddButtonClick() {
  // 相对于当前Admin组件的路由，跳转到add子路由
  this.router.navigate(['add'], { relativeTo: this.route });
}

Superuser组件的Add按钮跳转代码 #

同理，确保路径正确：

// 绝对路径写法
this.router.navigate(['/dashboard/superuser/add']);

// 相对路径写法
this.router.navigate(['add'], { relativeTo: this.route });

最后验证路由匹配逻辑 #

如果上面两步调整后还是有问题，检查下路由配置的顺序：确保具体的路由（比如admin、superuser）放在通配符路由（**）的前面，避免被提前拦截。

另外，确认Dashboard组件的模板里有<router-outlet></router-outlet>，用来渲染Admin/Superuser组件；如果你的Add组件是作为Admin/Superuser的子组件渲染，那Admin/Superuser的模板里也需要添加<router-outlet></router-outlet>哦。

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