摘要：在上一章節(jié)，通過新建項(xiàng)目之后，會(huì)自動(dòng)引入路由模塊，接下來需要做的事情就是對路由模塊進(jìn)行配置。為了方便維護(hù)，多帶帶把路由模塊的配置拿出來，再去輸出到中。路由守衛(wèi)業(yè)務(wù)需求是在沒有登錄的情況下，是不允許跳入到下一個(gè)頁面的。

單頁面應(yīng)用通過路由來去渲染不同的視圖，為用戶在同一個(gè)頁面看到不同的場景，提供基礎(chǔ)服務(wù)。

在上一章節(jié)，通過新建項(xiàng)目之后，ngModule會(huì)自動(dòng)引入路由模塊，接下來需要做的事情就是對路由模塊進(jìn)行配置。為了方便維護(hù)，多帶帶把路由模塊的配置拿出來，再去輸出到ngModule中。

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {LoginComponent} from "./core/login/login.component";
import {NotFoundComponent} from "./core/not-found/not-found.component";
import {Auth} from "./core/login/login.Auth";

const routes: Routes = [
  {path: "login", component: LoginComponent},
  {path: "stones", loadChildren: "./stones/stones.module#StonesModule", canActivate: [Auth]},
  {path: "", redirectTo: "/login", pathMatch: "full"},
  {path: "**", component: NotFoundComponent}
];

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

在app組件下，暫時(shí)只引了三個(gè)組件，一個(gè)是項(xiàng)目啟動(dòng)的默認(rèn)登錄頁面，一個(gè)是404頁面，另一個(gè)是stones組件，這個(gè)組件又會(huì)作為一個(gè)父級的路由容器來去管理他下面的頁面。

這樣做的理由是，為了在頁面多了之后方便管理，層級上面一定要分明，不能扁平化，所有的東西都一股腦的掛在app下面。通過引入stones路由，再讓stones路由去管理其他的子路由是一個(gè)不錯(cuò)的選擇。
項(xiàng)目結(jié)構(gòu)如下：

（ps：項(xiàng)目本身一直在寫，之后可能有所改變，但思路不變，不直接通過app根節(jié)點(diǎn)去管理）

在路由的具體的配置方面：

{path: "", redirectTo: "/login", pathMatch: "full"}

redirectTo表示在頁面路由為空時(shí)（一般是剛進(jìn)入項(xiàng)目），會(huì)重定向到login頁面。

{path: "**", component: NotFoundComponent}

路由是根據(jù)path自上而下匹配的，如果說瀏覽器中的地址上的路由變成一個(gè)不存在的值時(shí)，那么會(huì)一直向下匹配，直到匹配到**，這個(gè)可以匹配任意路由的配置，這也是做404頁面的原理，因此一定要把**這個(gè)配置寫在最后一行。

  {path: "stones", loadChildren: "./stones/stones.module#StonesModule", canActivate: [Auth]},

業(yè)務(wù)需求是在沒有登錄的情況下，是不允許跳入到下一個(gè)頁面的。這時(shí)路由守衛(wèi)就派上了用場。

用CanActivate來處理導(dǎo)航到某路由的情況。
用CanDeactivate來處理從當(dāng)前路由離開的情況.

最常用的是這兩個(gè)屬性，類似于react的enter和leave，只是描述不同，都是用來對進(jìn)入和離開路由做限制的，它們接受一個(gè)布爾值，來是否同意用戶在路由上做跳轉(zhuǎn)。

以一個(gè)登錄舉例，這里引入的Auth，是一個(gè)判斷是否登錄的方法。
login.Auth.ts：

import {Injectable} from "@angular/core";
import {Router, CanActivate} from "@angular/router";
import {NotyService} from "../../service/noty/noty.service";

@Injectable()
export class Auth implements CanActivate {
  constructor(private noty: NotyService, private route: Router) {
  }

  canActivate() {
    return sessionStorage.getItem("user")
      ? true
      : (this.noty.alert({
        text: "????請登錄~~????"
      }), this.route.navigate(["/login"]), false);
  }
}

直接在瀏覽器中更改stones路由，就會(huì)觸發(fā)這個(gè)函數(shù)，以此來檢測是否登錄。

本章路由到此為止，下一章節(jié)主要講UI框架的引入及在ts中引用js插件。

項(xiàng)目地址：https://github.com/jiwenjiang...