angular——路由

路由使用

• app-routing.module.ts 中配置路由

// 引入组件
import {
    FunComponent } from './components/fun/fun.component'
import {
    HomeComponent } from './components/home/home.component'
import {
    Son1Component } from './components/son1/son1.component'
import {
    Son2Component } from './components/son2/son2.component'

// 配置路由
const routes: Routes = [
  {
    path: '', redirectTo: 'home', pathMatch: 'full' }, // 默认路由
  {
   
    // children 配置子路由
    path: 'home', component: HomeComponent, children: [
      {
    path: '', redirectTo: 'son1', pathMatch: 'full' }, // 默认路由
      {
    path: 'son1', component: Son1Component },
      {
    path: 'son2', component: Son2Component },
    ],
  },
  {
    path: 'fun/:id', component: FunComponent },
]

• 配置显示 router-outlet 路由

<!-- app.component.html 下 -->
<h2>
  <!-- routerLinkActive 添加的 active 可以在 css 中自定义自己想要的样式 -->
  <a routerLink="/home" routerLinkActive="active">home</a>
  &nbsp;&nbsp;&nbsp;
  <a routerLink="/fun" routerLinkActive="active">fun</a>
</h2>
<router-outlet></router-outlet>

<!-- home.component.html 下（子路由） -->
<h3>
  <a routerLinkActive="active" routerLink=