>实际上 如果你需要用到路由，在根组件 html中引入 ~~~ <router-outlet></router-outlet> ~~~ >在app-routing.module.ts中使用 [**]匹配所有路由,在""或者/路由时 需要加上pathMatch:"full" ~~~ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LifetimeComponent } from './components/lifetime/lifetime.component'; import { HomeComponent } from './components/home/home.component'; import { MissComponent } from './components/miss/miss.component'; import { NewsComponent } from './components/news/news.component'; import { DetailComponent } from './components/detail/detail.component'; const routes: Routes = [ {path:"", redirectTo:'/home',pathMatch:"full"}, // {path:"", component:HomeComponent}, {path:"lifetime", component:LifetimeComponent}, {path:'home',component:HomeComponent}, {path:'news',component:NewsComponent}, {path:'detail',component:DetailComponent}, {path:"404",component:MissComponent}, {path:"**",redirectTo:"/404"} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ~~~ >在路由转跳 导航页面 html ## 重要 ~~~ routerLinkActive="active" 被选中的导航链接的class名称 ~~~ ~~~ <ul> <li *ngFor="let item of lists;let key=index"> <a [routerLink]="['/detail']" [queryParams]="{aid:key}"> {{item}}</a> <!-- <a routerLink="/detail" [queryParams]="{aid:key}"> {{item}}</a>--> </li> </ul> ~~~ >[info]在接受路由get请求参数的 detail.component.ts中 ~~~ import { Component, OnInit } from '@angular/core'; //引入路由模块 import {ActivatedRoute} from "@angular/router"; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', styleUrls: ['./detail.component.css'] }) export class DetailComponent implements OnInit { //依赖注入 constructor(public router:ActivatedRoute) { } public aid:string; ngOnInit(): void { //异步io数据流获取 this.router.queryParams.subscribe((res)=>{ this.aid=res.aid; }); } } ~~~