①路由的配置

1、首先用腳手架新建一個專案，在路由配置時選擇yes

2、用ng g component建立元件

3、在src/app/app-routing.module.ts中配置路由

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

import { FirstComponent } from './components/first/first.component';
import { TwoComponent } from './components/two/two.component';
import { FirstChildrenComponent } from 
 
'./components/first-children/first-children.component';
import { TwoChildrenComponent } from './components/two-children/two-children.component';
import { ThreeComponent } from './components/three/three.component';

const routes: Routes = [
  // { path: '', component: FirstComponent }, //表示匹配到'/'路徑,顯示FirstComponent元件
 

  {
    path: 'first', component: FirstComponent,
    children: [  //設定子路由
      { path: 'firstC/:hxId', component: FirstChildrenComponent } //設定動態路由
    ]
  },
  {
    path: 'two', component: TwoComponent,
    children: [
      { path: 'twoC', component: TwoChildrenComponent }
    ]
  },
  {
    path: 
 
'three', component: ThreeComponent
  },
  // { path: '**', component: FirstComponent }, //**表示匹配任意路徑,顯示FirstComponent元件
  { path: '', redirectTo: '/first', pathMatch: 'full' },  //表示匹配到'/'路徑,重定向到'/first'路徑
  // { path: '**', redirectTo: '/two', pathMatch: 'full' } //**表示匹配任意路徑,重定向到'/first'路徑
];

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

②路由傳參

1、使用動態路由傳參

在first.component.html中，進行路由跳轉，傳參

<p>我用動態路由進行傳參</p>
<ul>
  <!-- 使用動態路由 -->
  <li><a [routerLink]="[ '/first/firstC/',1]">我是商品1的詳情</a></li>
</ul>
<router-outlet></router-outlet>
<button (click)="tiaoZhuan()">js跳轉路由</button>

在first-children.component.ts子元件中引入ActivatedRoute模組，接收引數

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-first-children',
  templateUrl: './first-children.component.html',
  styleUrls: ['./first-children.component.less']
})
export class FirstChildrenComponent implements OnInit {

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    console.log(this.route);
    this.route.params.subscribe({
      next(res): any {
        console.log(res);
      }
    });
  }

}

2、使用get傳參

在two.component.html中，進行路由跳轉，傳參

<p>我用get進行傳參</p>
<ul>
  <!-- 使用get傳參 -->
  <li><a [routerLink]="['/two/twoC']" [queryParams]="{hxId:1}">我是商品1的詳情</a></li>
</ul>
<router-outlet></router-outlet>

在two-children.component.ts子元件中引入ActivatedRoute模組，接收引數

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-two-children',
  templateUrl: './two-children.component.html',
  styleUrls: ['./two-children.component.less']
})
export class TwoChildrenComponent implements OnInit {

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    console.log(this.route);
    this.route.queryParams.subscribe({
      next(res): any {
        console.log(res);
      }
    });
  }

}

③js路由跳轉

在first.component.html中，進行路由跳轉

<p>我用動態路由進行傳參</p>

<!-- js跳轉路由 -->
<button (click)="tiaoZhuan()">js跳轉路由</button>

在first.component.ts中實現，引入Router模組

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.less']
})
export class FirstComponent implements OnInit {

  constructor(public router: Router) { }

  ngOnInit(): void {
  }
  tiaoZhuan(): any {
    console.log(this.router);
    this.router.navigate(['/three']); //實現路由跳轉，也可以用動態路由或者get方式傳參
  }

}