Angular项目如何配置路由将Home组件设为网站默认打开首页

完整配置示例 #

首先确保HomeComponent已正常创建并在项目中声明，以下是app-routing.module.ts的完整代码：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你创建的Home组件
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  // 根路径空路由重定向到home页
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  // home路径匹配对应Home组件
  {
    path: 'home',
    component: HomeComponent
  }
];

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

关键配置说明 #

• pathMatch: 'full'为必填项，代表只有完全匹配根空路径时才会触发重定向，避免所有路由都被拦截重定向到home页
• 配置生效后，访问站点根路径时会自动跳转至/home，HomeComponent会自动渲染到你app.component.html中的<router-outlet></router-outlet>位置，全局的header和footer会固定保留，符合你的布局要求

异常排查 #

如果配置完成后未生效，请检查app.module.ts的imports数组中是否已正确导入AppRoutingModule。

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