Angular点击链接URL正常更新但对应路由页面未加载问题咨询

• 先检查路由渲染占位符：确认路由对应的父组件模板中是否添加了<router-outlet>标签，这是Angular渲染子路由内容的必需占位容器，缺失的话即使路由匹配成功也不会加载对应页面。
• 核对路由配置规则：
  1. 检查路由定义的路径是否和跳转路径匹配，Angular路由配置的path字段禁止开头加斜杠，比如path: '/site/network'属于错误写法，要改成path: 'site/network'或者拆成父子路由配置。
  2. 确认父路由是否错误配置了pathMatch: 'full'，如果父路由加了全匹配规则，子路由会无法命中。
  3. 检查路由模块导入是否正确：根模块必须用RouterModule.forRoot(routes)导入路由配置，子特性模块必须用RouterModule.forChild(childRoutes)导入。
• 查看控制台报错：打开浏览器开发者工具的Console标签，排查是否有组件初始化错误、依赖注入失败、接口请求异常等报错，这类错误会直接阻塞组件渲染。
• 验证路由守卫逻辑：如果路由配置了canActivate/canActivateChild等守卫，检查守卫逻辑是否会返回false或者一直处于异步pending状态，导致路由加载被拦截。
• 排查路由复用策略：如果项目自定义了RouteReuseStrategy路由复用规则，临时注释复用策略测试是否能正常加载，确认是否是复用逻辑错误导致组件没有重载。

参考路由配置写法如下：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SiteLayoutComponent } from './layout/site-layout.component';
import { NetworkComponent } from './pages/network/network.component';
import { SubnetsComponent } from './pages/subnets/subnets.component';

const routes: Routes = [
  {
    path: 'site',
    component: SiteLayoutComponent, // 该组件模板中必须包含<router-outlet>
    children: [
      { path: 'network', component: NetworkComponent },
      { path: 'subnets', component: SubnetsComponent }
    ]
  }
];

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

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