1 使用 routerLink 指令 路由跳转

项目创建从一行命令开始：

ng new ng-demo

然后是组件创建，这一步通常不会少：

ng g component components/home
ng g component components/news
ng g component components/produect

自然要做的第一步，就是在 app-routing.module.ts 中把路由配置好。先引入组件：

import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { ProductComponent } from './components/product/product.component';

接着配置路由规则：

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', redirectTo: 'home'}
];

根组件的模板里，用 router-outlet 来显示动态加载的路由内容，这是最基础的做法：

  首页
  新闻

routerLink 负责跳转，而默认路由用 redirectTo 就能处理匹配不到的情况：

//匹配不到路由的时候加载的组件 或者跳转的路由
{path: '**', redirectTo: 'home'}

routerLinkActive 用来给当前选中的路由加个高亮样式，比如：

  
    首页
  
  
    新闻
  

.active {
  color: green;
}

这里也可以换成数组绑定的写法，效果是一样的：

    首页
    新闻

2 使用方法跳转路由 - 使用 router.na vigate 方法

除了指令，还能在组件里通过注入 Router 服务，调用 na vigate 方法来实现编程式跳转：

import { Component } from '@angular/core';
import { Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }
  goToPage(path: string) {
    this.router.na vigate([path]).then(r => {})
  }
}

模板里配合按钮点击事件即可：

  首页
  新闻

3 routerLink跳转页面传值 - GET传值的方式

页面跳转的同时，经常需要顺带传些参数。queryParams 就是用来干这个的，写法也很直观：

  首页
  新闻

接收参数的地方，就得靠 ActivatedRoute 了：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }
  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(data => {
      console.log(data)
    })
  }
}

4 使用方法跳转页面传值 - GET传值的方式

如果用编程式跳转，传参方式也类似，只是把参数放在了 na vigate 的第二个参数里：

    首页
    新闻


import { Component } from '@angular/core';
import { Router} from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'routerProject';
  constructor(public router: Router) {
  }
  goToPage(path: string, param: string) {
    this.router.na vigate([path], {
      queryParams: {
        name: param
      }
    }).then(r => {})
  }
}

5 动态路由的方式 - 路由跳转

动态路由的做法，是在路由配置里加个 :id 这样的占位符：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
import {ProductComponent} from "./components/product/product.component";
const routes: Routes = [
  {path: 'home/:id', component: HomeComponent},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

页面设置参数时，把值放在数组里即可：

  首页

接收动态参数的写法稍有不同，用的是 params 而不是 queryParams：

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit{
  constructor(public activatedRoute: ActivatedRoute) {
  }
  ngOnInit(): void {
    this.activatedRoute.params.subscribe(data => {
      console.log(data)
    })
  }
}

6 父子路由

父子里由的场景也很常见，比如在一个页面里再嵌套另一个路由。先创建好组件并引入：

import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";

然后在路由配置里用 children 来组织：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./components/home/home.component";
import {NewsComponent} from "./components/news/news.component";
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'news',
        component: NewsComponent
      },
      {path: '**', redirectTo: 'home'}
    ]
  },
  {path: '**', redirectTo: 'home'}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

父组件模板里也要放一个 router-outlet，用来显示子路由的内容：