Angular 8 路由跳转异常：URL变更但页面内容始终未更新

• Angular 中的AppComponent是应用启动时加载的顶级根容器，所有业务路由页面都需要渲染到它模板预留的<router-outlet>位置，绝不能将根组件本身作为路由目标配置到路由表中。
• 当前代码存在两处逻辑冲突：
  1. 你把整个登录页的静态DOM硬编码写在了AppComponent的模板里
  2. 路由表中配置了{ path: 'login', component: AppComponent }，把根组件直接当成了登录页的路由组件
• 这种配置会导致：地址栏的URL更新是路由模块独立运行的逻辑，所以你能看到地址正常变化；但路由组件的渲染流程完全混乱——跳转至/dash时，本该插入到router-outlet的EmpDashComponent，因为根组件的错误绑定，根本无法替换掉写死在模板里的登录页静态内容，最终表现为页面始终停留在登录页。

• 拆分独立登录组件
  新建独立的LoginComponent，将当前app.component.html里<section id="login-page">包裹的全部登录代码，完整迁移到LoginComponent的模板中。调整根组件模板，仅保留全局路由出口：

  <router-outlet></router-outlet>
  

  不在根组件中硬编码任何具体业务页面的DOM。
• 修正路由表配置
  替换路由表中错误的登录路由配置，将原来指向AppComponent的配置改为指向新建的LoginComponent，调整后的路由表如下：

  const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'dash', component: EmpDashComponent },
    { path: 'profile', component: EmpProfileComponent },
    { path: '**', component: PageNotFoundComponent }
  ];
  

• 修正跳转交互的潜在问题
  • 统一所有routerLink的路径写法，按钮上的routerLink="dash"补充斜杠改为routerLink="/dash"，避免相对路径计算偏差。
  • 不要给表单内的submit类型按钮直接绑定routerLink，这类按钮的默认表单提交行为会干扰路由跳转，可将按钮type改为button，或通过表单ngSubmit事件调用Router.navigate()方法实现跳转。

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