- 确保在app.module.ts文件中导入了RouterModule:
import { RouterModule, Routes } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppModule { }
- 在路由文件中设置路由路径和组件之间的对应关系:
import { OtherComponent } from './other/other.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'other', component: OtherComponent }
];
- 在应用程序模板中使用routerLink指令来导航到不同组件:
- 在AppComponent中使用router-outlet指令显示组件: