Angular 5路由跳转异常求助：URL变更但页面未切换

兄弟，你遇到的这个问题其实是Angular路由入门阶段最容易踩的坑，我帮你拆解一下核心问题和解决步骤：

1. 先检查路由配置文件（app-routing.module.ts） #

你大概率是没给dashboard路径配置对应的路由规则，也没正确设置路由的默认跳转。打开你的路由配置文件，按照下面的方式调整：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
// 记得导入你的dashboard组件，路径根据实际情况调整
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  // 默认访问根路径时跳转到登录页
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  // 登录页路由
  { path: 'login', component: LoginComponent },
  // 关键！添加dashboard对应的路由规则
  { path: 'dashboard', component: DashboardComponent },
  // 处理未匹配的路径，跳回登录页
  { path: '**', redirectTo: '/login' }
];

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

2. 必须在AppComponent模板中添加<router-outlet> #

你现在的AppComponent模板里只写了<app-login>，这是硬编码死的组件，Angular路由切换后没有地方渲染新的组件！赶紧把app.component.html改成这样：

<router-outlet></router-outlet>

<router-outlet>是Angular路由的“渲染容器”，当你调用this.router.navigate(['dashboard'])时，Angular会把DashboardComponent渲染到这个容器里，替换掉之前的LoginComponent。

3. 确认LoginComponent中正确注入了Router服务 #

你的onSubmit方法里用到了this.router.navigate，要确保已经在组件的构造函数中注入了Router服务，没漏的话应该是这样：

import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 别忘了导入

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string = '';
  password: string = '';

  // 构造函数中注入Router
  constructor(private router: Router) { }

  onSubmit() {
    console.log(`username: ${this.username} password: ${this.password}`);
    if(this.username == 'admin' && this.password == 'admin'){
      this.router.navigate(['dashboard']);
    }
  }
}

4. 最后检查组件声明 #

确保LoginComponent、DashboardComponent这些组件都已经在AppModule的declarations数组中声明了，不然Angular找不到它们：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    // 其他组件...
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, // 还要确保导入了路由模块
    // 其他依赖模块...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

做完这些步骤，重启应用再测试，登录验证通过后应该就能正常跳转到dashboard页面了！

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