Angular4-路由表

在上一篇介紹了路由的基本概念,在這邊就來簡單的透過路由表做些設定來玩玩看吧!


上一篇已經建立好第一個含有路由的範本專案,現在我們來建立二個元件

ng g c page1

ng g c page2

接著我們把app.component.html裡面的所有程式碼都移除,只留下<router-outlet></router-outlet>吧

 

接著來設定路由吧!打開app-routing.module.ts在這邊我設定了一個預設路由,預設路由會執行的元件即是page1

第二個我設定的路由即是MyPage,當找到這個路由時,會執行元件page2

預設路由:

第二個路由


接著我再試著輸入「http://localhost:4200/mypage」小寫的mypage發現頁面完全沒載入元件,推測網址應該是區分大小寫的,並且找不到元件的話就不顯示


而路由該怎麼去設定呢?我想可以參考這張圖片


LINE討論群FB討論區

歡迎您的加入,讓這個社群更加美好!

聯絡方式:
FaceBook
E-Mail