Angular中RouterLink跳转后URL变更但指定组件未渲染问题

1. 修正RouterLink路径写法 #

从URL变化（localhost:4200/home/news-list//news-details）能看出，路径出现了多余斜杠，这是核心问题之一：

• 若news-details是news-list的子路由，RouterLink应写成：

  <div [routerLink]="['news-details']">查看详情</div>
  

• 若news-details是news-list的同级路由，RouterLink应写成：

  <div [routerLink]="['../news-details']">查看详情</div>
  

• 若用绝对路径，需从根路由开始定义，避免双斜杠：

  <div [routerLink]="['/home/news-details']">查看详情</div>
  

2. 核对路由配置 #

检查news-routing.module.ts里的路由定义：

const routes: Routes = [
  // 子路由场景
  { 
    path: 'news-list', 
    component: NewsListComponent,
    children: [
      { path: 'news-details', component: NewsDetailsComponent }
    ]
  },
  // 同级路由场景
  { path: 'news-list', component: NewsListComponent },
  { path: 'news-details', component: NewsDetailsComponent }
];

如果是子路由，必须在NewsListComponent的模板中添加<router-outlet></router-outlet>，否则子组件无法渲染。

3. 确认RouterModule导入方式 #

在news模块中，要使用forChild而非forRoot导入路由：

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [NewsListComponent, NewsDetailsComponent]
})
export class NewsModule { }

4. 检查根路由配置 #

确认app-routing.module.ts中正确加载news模块路由：

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./news/news.module').then(m => m.NewsModule) }
];

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