(精华2020年6月10日更新)Angular实战篇 路由的使用

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './components/home/home.component';

import { WelcomeComponent } from './components/home/welcome/welcome.component';
import { SettingComponent } from './components/home/setting/setting.component';
import { HttpComponent } from './components/http/http.component';
import { AxiosComponent } from './components/axios/axios.component';
import { NewsComponent } from './components/news/news.component';
import { NewsdetailComponent } from './components/newsdetail/newsdetail.component';
import { ProductComponent } from './components/product/product.component';

import { ProductdetailComponent } from './components/productdetail/productdetail.component';



const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [{
      path: 'welcome',
      component: WelcomeComponent
    }, {
      path: 'setting',
      component: SettingComponent
    }, {
      path: '*',
      redirectTo: 'welcome'
    }]
  },
  {
    path: 'http',
    component: HttpComponent
  },
  {
    path: 'axios',
    component: AxiosComponent
  },
  {
    path: 'news',
    component: NewsComponent
  },
  {
    path: 'newsdetail',
    component: NewsdetailComponent
  },
  {
    path: 'product',
    component: ProductComponent
  },
  {
    path: 'product/detail/:id',   //动态传参
    component: ProductdetailComponent
  },
  {
    path: '*',
    redirectTo: '/home'
  }
];

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

app.component.html

<div class="header">

    <a routerLink="/home" routerLinkActive="actived" >首页</a>
    <a routerLink="/http" routerLinkActive="actived" >请求</a>
    <a [routerLink]="['/axios']" routerLinkActive="actived" >axios</a>
    <a [routerLink]="['/news']" routerLinkActive="actived" >新闻</a>
    <a [routerLink]="['/product']" routerLinkActive="actived" >产品</a>
</div>

<router-outlet></router-outlet>