本篇文章主要介紹了Angular 5.x 學習筆記之Router(路由)應用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
序言：
Angular APP 視圖之間的跳轉，依賴於Router （路由），這一章，我們來講述Router 的應用
實例講解
運行結果如下。設定了3個導覽欄， Home、 About、Dashboard。點選不同的導覽欄，跳到對應的頁面：
建立3個component
路由與設定
（1）**引入Angular Router **#當用到Angular Router 時，需要引入RouterModule，如下：
// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
BrowserModule, RouterModule
],import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';建立 Router Configure 檔案
在 app 目錄下， 建立 routerConfig.ts 檔案。程式碼如下：import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{ path: 'dashboard',
component: DashboardComponent
}
];// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],#宣告Router Outlet
在app.component.html 檔案中，新增程式碼：<p style="text-align:center">
<h1>
{{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</p>運行
進入到該工程所在的路徑，運行;##ng serve --open
即可看到本篇開始的結果。
關於Router，換一種寫法：
在app.moudle.ts 檔案中，程式碼如下：
imports: [
BrowserModule,
RouterModule.forRoot(
[
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
]
)
],小結
自從引入了元件導向（component）後，路由管理相比 AngularJS （1.X），方便了許多。進一步優化：
或許你已經注意到，當訪問 http://localhost:4200 時，它的路徑應該是 “/”， 我們應該設定這個預設的路徑。
{
path: '',
redirectTo:'/home',
pathMatch: 'full'
},登入後複製
零基礎學習AJAX之製作自動校驗的表單
############ajax的get請求時快取處理解決方法######################### ##以上是Angular 5.x 學習筆記之Router(路由)應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
