angular路由
angular路由:
1.app-routing.module.ts 配置
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { NewsComponent } from './views/news/news.component'; import { AboutComponent } from './views/about/about.component'; import { IndexComponent } from './views/index/index.component'; import { Page404Component } from './views/page404/page404.component'; const routes: Routes = [ { path:'', component:IndexComponent, }, // 动态路由 { path:'news/:id', component:NewsComponent, }, { path:'about', component:AboutComponent, }, // 找不到的页面 { path:'**', component:Page404Component, }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
2. app.component.html
<div> <span [routerLink]="['']">首页</span> <span [routerLink]="['/about']">about</span> <span [routerLink]="['/news']">news</span> </div> <router-outlet></router-outlet>