前言：

  最近小編在進行前端框架Angular2的最佳實踐，現在對於其中的路由跳轉有一些新的體會，在這裡小編與君共勉。

正文：

路由跳轉

定義：

   針對於Angular構建的單頁應用而言，頁面跳轉即為從一個配置項跳轉到另一個配置項的行為。簡而言之，就是配置項的相互跳轉。

  PS：Web應用中的頁面跳轉，指的是應用響應某個事件，從一個頁面跳轉到另外一個頁面。

實現路由基本三部曲

1. 定義路由配置

2. 建立根路由模組

3. 新增<router-outlet></router-outlet>指令標籤

核心工作流程

流程說明

首先，當用戶在瀏覽器上輸入了url之後，Angular將獲取該URL並將其解析生成一個UrlTree例項

其次，在路由配置中尋找並激活與UrlTree例項匹配的配置項。

再次，為配置項中制定的元件建立例項

類別：

  路由跳轉分為指令、程式碼跳轉兩類。下面主要介紹程式碼跳轉的實現過程。

實踐目標：

當點選的登入時可以跳轉到另外一個頁面，頁面呈現“程式碼跳轉”

具體步驟

定位目錄（以我為例，我想要在user資料夾下新增一個元件home）

建立元件

PS：我是用命令建立元件的，如果大家是手動建立的話，實現此跳轉時需要手動修改

編輯home元件

編輯home.component.html

編輯home.component.ts

ps:僅僅加入了原《NiceFish》專案裡元件跳轉的效果：fade-in。根據需要編輯此檔案

修改user-login元件

修改user-login.component.html

新增click事件：(click)=” Home()”

修改user-login.component.ts

新增按鈕“登入”所響應的click事件：Home()

修改根元件模組app.module.ts

PS:在建立元件時，如果是手動建立，就執行此步驟，如果是使用命令自動建立的話，就自動忽略這一步驟

修改根元件路由app.route.ts

引入home元件，新增home元件相應的路徑

PS：至此就完成了使用程式碼跳轉的路由跳轉。

後記：

    對於angular2的研究或許只是時間的問題。