Angular9 定义基本路由

创建路由有三个基本的构建块。

把 AppRoutingModule 导入 AppModule 并把它添加到 imports 数组中。

Angular CLI 会为你执行这一步骤。但是，如果要手动创建应用或使用现存的非 CLI 应用，请验证导入和配置是否正确。下面是使用 --routing 标志生成的默认 AppModule。

//Default CLI AppModule with routing


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 把 RouterModule 和 Routes 导入到你的路由模块中。

Angular CLI 会自动执行这一步骤。CLI 还为你的路由设置了 Routes 数组，并为 @NgModule() 配置了 imports 和 exports 数组。

    //CLI app routing module


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


    const routes: Routes = []; // sets up routes constant where you define your routes


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

1. 在 Routes 数组中定义你的路由。

这个数组中的每个路由都是一个包含两个属性的 JavaScript 对象。第一个属性 path 定义了该路由的 URL 路径。第二个属性 component 定义了要让 Angular 用作相应路径的组件。

    //AppRoutingModule (excerpt)


    const routes: Routes = [
      { path: 'first-component', component: FirstComponent },
      { path: 'second-component', component: SecondComponent },
    ];

1. 把这些路由添加到你的应用中。

现在你已经定义了路由，可以把它们添加到应用中了。首先，添加到这两个组件的链接。把要添加路由的链接赋值给 routerLink 属性。将属性的值设置为该组件，以便在用户点击各个链接时显示这个值。接下来，修改组件模板以包含 <router-outlet> 标签。该元素会通知 Angular，你可以用所选路由的组件更新应用的视图。

    //Template with routerLink and router-outlet


    <h1>Angular Router App</h1>
    <!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
    <nav>
      <ul>
        <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
        <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
      </ul>
    </nav>
    <!-- The routed views render in the <router-outlet>-->
    <router-outlet></router-outlet>

路由顺序

路由的顺序很重要，因为 Router 在匹配路由时使用“先到先得”策略，所以应该在不那么具体的路由前面放置更具体的路由。首先列出静态路径的路由，然后是一个与默认路由匹配的空路径路由。通配符路由是最后一个，因为它匹配每一个 URL，只有当其它路由都没有匹配时，Router 才会选择它。