Angular 4设置启动默认页面：将登录页设为首页并对应/login路径

嗨，这个需求其实很简单，核心就是配置Angular的路由重定向规则，让应用启动时自动跳转到/login路径并渲染登录页。我给你一步步拆解怎么做：

首先在你的app.module.ts顶部，确保已经导入Angular路由的核心模块，以及你需要用到的各个页面组件：

import { RouterModule, Routes } from '@angular/router';
// 导入登录组件（路径根据你的项目结构调整）
import { LoginComponent } from './login/login.component';
// 按需导入注册、员工管理组件
import { RegisterComponent } from './register/register.component';
import { EmployeeManagementComponent } from './employee-management/employee-management.component';

接下来创建路由规则数组，包含各页面的路由映射，以及关键的默认重定向规则：

const appRoutes: Routes = [
  // 登录页路由：路径/login对应LoginComponent
  { path: 'login', component: LoginComponent },
  // 注册页路由
  { path: 'register', component: RegisterComponent },
  // 员工管理页路由
  { path: 'employee-management', component: EmployeeManagementComponent },
  // 默认重定向规则：访问根路径时自动跳转到/login
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

这里要重点注意pathMatch: 'full'，它的作用是确保只有当用户访问的路径完全匹配根路径（空字符串）时，才会触发重定向，避免和其他路由规则产生冲突。

把刚才定义的路由数组通过RouterModule.forRoot()方法注册到模块的imports数组里：

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent,
    EmployeeManagementComponent
    // 其他项目组件...
  ],
  imports: [
    // 你已有的其他模块（比如BrowserModule等）
    BrowserModule,
    // 注册路由配置
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，打开app.component.html，确保里面有<router-outlet>标签——这是Angular用来渲染当前路由对应组件的容器，如果没有的话，直接添加即可：

<router-outlet></router-outlet>

完成以上配置后，启动你的Angular 4应用，浏览器会自动跳转到带有/login路径的地址，同时页面会渲染你的登录组件，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Najm Eddine ZAGA