在Angular中,实现路由可以通过使用Angular内置的RouterModule模块来完成。下面是一个简单的示例,演示了如何在Angular中实现路由:
npm install @angular/router
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入页面组件
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
// 定义路由
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }, // 默认路由
{ path: 'home', component: HomeComponent }, // 主页路由
{ path: 'about', component: AboutComponent } // 关于页面路由
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
template: `
My App
`
})
export class AppComponent {
constructor(private router: Router) { }
}
这样,当用户点击导航链接时,Angular会根据路由配置加载相应的组件,并在