[JavaScript知识库]Angular 子路由及动态路由

路由的模块写法_MIKE-zi的博客-CSDN博客首先参考上篇文章angular 路由基础_MIKE-zi的博客-CSDN博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 dehttps://blog.csdn.net/lee727n/article/details/124454562?spm=1001.2014.3001.5502继续上一节的模块，写Home的下一级子路由

1.hoem-routing.module.ts 注意二级路由使用children数组，同时子路由名称不确定是动态的。使用：tabLink的写法，代表tablink可以是任何值都会匹配到homeDetailComponent

const routes: Routes = [
  {
    path: 'home',
    component: HomeContainerComponent,
    children: [
      {
        /**
         * 路由节点可以没有 component
         * 一般用于重定向到一个默认子路由
         */
        path: '',
        redirectTo: 'hot',
        pathMatch: 'full'
      },
      {
        /**
         * 路径参数，看起来是 URL 的一部分
         */
        path: ':tabLink',
        component: HomeDetailComponent,
      }
    ]
  }
];

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

2.home-container.component.html中增加占位路由

<app-scrollable-tab
  [menus]="topMenus"
  [backgroundColor]="'#fff'"
  [indicatorColor]="'red'"
  [titleColor]="'#3f3f3f'"
  [titleActiveColor]="'red'"
  (tabSelected)="handleTabSelected($event)"
>
</app-scrollable-tab>
<router-outlet></router-outlet>

3.home-container.component.ts 增加跳转的方法

  ngOnInit(): void {}

  handleTabSelected(topMenu: TopMenu) {
    this.router.navigate(['home', topMenu.link]);
  }
}

4.二级子路由中的集体内容，自定义HomeContainerComponent相关文件即可

这就实现了子路由，以及动态路由。

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖