【Ionic 4】新頁面瀏覽機制：Angular Router

新版Ionic 4在頁面瀏覽(navigation)機制方面加入了Angular Router，連帶頁面權限方面也可使用Router的CanActivate等機制進行控管；Ionic舊版的push/pop方式雖仍可使用，但預期未來應不會再支援。

(本文範例完整程式碼與執行結果可參考stackblitz.com上的專案程式碼與執行結果。)

新建使用Angular Router的Ionic 4專案

為了讓新建專案使用Angular Router，Ionic CLI 4版加入新選項--type=angular。新建專案時加入此選項，便會建立Angular Routing模組檔，內有瀏覽頁面相關設定，例如新建專案：

ionic start RoutingExample blank --type=angular

則會建立模組檔： src/app/app-routing.module.ts，內有預設頁面瀏覽路徑設定：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];