1. 創(chuàng)建建組件后, app.module.ts文件中引入angular/router,并引入創(chuàng)建好的組件
2. 在NgModule中的imports中添加路由
RouterModule?的?forRoot()?方法來定義你的路由。該方法接受一個 JavaScript 對象數(shù)組造垛，每個對象定義一個路由的屬性。forRoot()?方法確保你的應(yīng)用只會實例化一個?RouterModule
3. 在app.component模板中編輯模板通過UI元素控制導(dǎo)航,并添加<router-outlet></router-outlet>標簽
routerLink。該指令將你定義的路由連接到模板文件中(點擊跳轉(zhuǎn)到指定顯示的界面)
routerLinkActive?指令搭幻，可以通知你的應(yīng)用把一個特定的 CSS 類應(yīng)用到當(dāng)前的活動路由中
4. 添加重定向,在module.ts中的imports中添加{?path:?'',?redirectTo:?'/heroes-list',pathMatch:'full'?}
redirectTo兢仰。這個屬性指示 Angular 從空路徑重定向到?heroes-list?路徑
pathMatch变丧。這個屬性指示 Angular 要如何匹配 URL , full表示當(dāng)路徑為空字符串時，使用此路由
5. 添加404頁面(用戶可以嘗試訪問你尚未定義的路由鲤妥。為了解決這個問題，最佳做法是顯示一個 404 頁面)
在app.module.ts文件中的imports添加{path: '**', component: PageNotFoundComponent}
路由使用路徑?**拱雏。這個路徑是 Angular 表示通配符路由的方式棉安。任何與你配置中的路由都不匹配的路由都會使用這個路由。(注意通配符路由要放在數(shù)組的末尾,angular執(zhí)行會按順序應(yīng)用路由并使用所找到的第一個匹配項)
