Angular 19路由异常：点击登录按钮无法跳转至Home组件

核心问题：路由顺序写错了 #

Angular的路由是按数组顺序从上到下匹配的，通配符路由（path: '**'）是兜底用的，必须放在所有路由的最后。你现在把它放在home路由前面，导致哪怕是/home这个合法路径，也会先被通配符路由捕获，直接重定向到登录页，根本轮不到home路由生效。

修复步骤 #

1. 调整路由顺序 #

把app.routes.ts里的通配符路由移到最后：

import { Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
    { path: '', component: LoginComponent }, // 默认登录路由
    { path: 'home', component: HomeComponent }, // Home路由放在前面
    { path: '**', redirectTo: '' }, // 通配符路由兜底，放最后
];  

2. 检查根组件的路由出口 #

确认你的根组件（一般是app.component.html）里有<router-outlet></router-outlet>，这是Angular用来显示路由组件的容器，要是没这个标签，就算路由切换成功，也看不到Home组件的内容：

<!-- app.component.html -->
<router-outlet></router-outlet>

改完之后再点登录按钮，就能正常跳转到Home组件了。

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