Angular6中路由的使用

Angular6中路由的使用

1 . 在app-routing-module.ts中定义routes

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from 'angular/router'; import { HappyComponent } from './routes/happy/happy.component'; import { WorkComponent } from './routes/work/work.component'; const routes: Routes = [ { path: 'work', component: WorkComponent }, { path: 'happy', component: HappyComponent }, { path: '', redirectTo: '/work '}, //路由重定向 { path: '**', component: HappyComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

2.在app.module.ts中引入相关组件

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { WorkComponent } from './routes/work/work.component'; import { HappyComponent } from './routes/happy/happy.component'; @NgModule({ declarations: [ AppComponent, WorkComponent, HappyComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

3.找到app.component.html根组件模板，配置router-outlet,显示动态加载的路由

<nav> <ul> //routerLinkActive 设置routeLink默认选中 <li><a routerLink="happy" routerLinkActive="router-link-active">Child A</a></li> </ul> </nav> <router-outlet></router-outlet>