基本概念

路由的概念并不是全新的，只不过一直是在服务器端编写路由代码。通常，服务器在收到 HTTP 请求时，会根据 URL 来显示相应的页面。
Angular 路由是在客户端编写路由，概念与服务器端基本类似，唯一不同的是，服务器端路由的核心概念是建立 URL 与页面的关系，而 Angular 路由的核心概念是建立 URL 与组件的关系。
通过 Angular 编写的程序称之为单页面应用，原因就在于服务器只提供一个页面，其他页面的渲染全部由 Angular 去完成。

前提条件

实现路由第一个需要修改的文件是 index.html：

例子：

// index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>App</title>

  <!-- 添加 <base href="/"> -->
  <!-- 路由的根目录 -->
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Angular 依靠 base 标签来构建路由信息，比如我们配置的路径为 /home，base 是 href="/app"，那么所有的页面会使用 /app/home 作为实际路径。

配置基础路由

最基础的路由就是根路由，它也是其他子路由得以正常运行的基础。

导入

首先需要在路由文件中导入一些配置路由的接口。

例子：

// app-routing.module.ts

import { NgModule } from '@angular/core';

// 导入 RouterModule 和 Routes
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [];

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

然后，将路由文件导入到根模块。

例子：

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// 导入路由模块 AppRoutingModule
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // 添加 AppRoutingModule 到 imports 数组中
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

*如果是通过 Angular Cli 构建的项目，以上步骤可省略。

配置根路由

在路由文件中，通过 Routes 来配置 Angular 路由，最基本的配置由 path 和 component 组成。

例子：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { WelcomeComponent } from './components/welcome/welcome.component';
import { PageNotFoundComponent } from './components//page-not-found/page-not-found.component';

const routes: Routes = [
  // path:指定路由的路径
  // component:建立与路由相关联的组件
  // redirectTo:将当前路径重定向到其他已知路由，常用于处理空路径的情况
  // **:通配符,当URL与所有路径都不匹配时，会选择这个路由，常用于展示404页面
  { 
    path: 'login', 
    component: LoginComponent
  },
  { 
    path: 'welcome', 
    component: WelcomeComponent
  },
  { 
    path: '', 
    redirectTo: '/login', 
    pathMatch: 'full'
  },
  { path: '**', 
    component: PageNotFoundComponent
  }
];

@NgModule({

  // 通过调用 RouterModule.forRoot() 方法安装根路由
  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]
})
export class AppRoutingModule { }

*路由的顺序很重要，因为匹配路径时，遵循的是“先匹配先展示”原则，因此，首先配置具体的路由，然后配置空路径路由，最后是通配符路由。

添加路由出口

在模板中，通过 router-outlet 元素指定了各个路由组件的内容在哪里被渲染。

例子：

// app.component.html

<section>
  <header>
    <h2>大连 —— 美丽的北方明珠</h2>
  </header>

  <!-- 路由出口 -->
  <router-outlet></router-outlet>

  <footer></footer>
</section>

图片描述

end

路由之配置基础路由

基本概念

前提条件

配置基础路由