Angular 8中this.router.navigate()仅修改URL却不渲染目标页面的问题求助

嘿，我一眼就瞅出问题所在了！

核心原因 #

你在app.component.html里直接硬编码了<app-login>组件，这就意味着不管路由怎么切换，这个登录组件都会一直固定显示在页面上。而Angular路由切换的内容只会渲染在<router-outlet>标签里，所以就出现了URL变成/home但登录页还留在原地的情况——相当于HomeComponent在router-outlet里渲染了，但LoginComponent还在外面占着位置。

解决步骤 #

1. 移除根组件里的硬编码登录组件

打开app.component.html，把<app-login></app-login>这一行删掉，修改后的代码应该是这样：

<div class="web-container">
  <div>
    <app-header>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </app-header>
  </div>
  <router-outlet></router-outlet>
</div>

这样初始访问http://localhost:4200/时，路由会根据你配置的默认路径（path: ''）自动把LoginComponent渲染到<router-outlet>里，完全符合需求。

2. 修复表单提交的潜在问题

另外，你的登录按钮放在<form>标签里，默认按钮类型是submit，点击后会触发表单提交导致页面刷新，这可能会干扰路由跳转。解决这个问题有两种方式：

• 方式一：修改按钮类型
  在login.component.html里给按钮加上type="button"：

<button type="button" class="btn btn-primary mybtn-login" (click)="onLoginClick()" >Login</button>

• 方式二：阻止默认提交行为
  在login.component.ts的onLoginClick方法里添加事件参数并阻止默认行为：

public onLoginClick(event: Event){
  event.preventDefault(); // 阻止表单默认提交
  console.log("Login Clicked");
  this.router.navigate(['./home']);
}

同时在html里传递事件参数：

<button class="btn btn-primary mybtn-login" (click)="onLoginClick($event)" >Login</button>

验证效果 #

做完上面的修改后，重新启动项目：

• 初始页面会显示LoginComponent，URL是/
• 点击登录按钮，URL会变成/home，页面完全切换为HomeComponent的内容，登录页不再显示，完美达到你的需求！

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