這次帶給大家Angular 5.x中Router使用詳解，Angular 5.x中Router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
序言：
Angular APP 視圖之間的跳轉，依賴Router （路由），這一章，我們來講述Router 的應用
運行結果如下。設定了3個導覽欄， Home、 About、Dashboard。點選不同的導覽列，跳到對應的頁面：
路由與設定
（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
}
];JavaScript，所以，檔案的字尾是： ts 而不是js
這個routerConfigue 文件，怎麼呼叫呢？需要把它載入到 app.module.ts 中，這是因為 app.moudle.ts 是整個Angular App 的入口。// 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'
},以上是Angular 5.x中Router使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
