設定路由
注意:此示例基於 @angular / router 的 3.0.0.-beta.2 版本。在撰寫本文時,這是路由器的最新版本
要使用路由器,請在新的 TypeScript 檔案中定義路由
//app.routes.ts
import {provideRouter} from '@angular/router';
import {Home} from './routes/home/home';
import {Profile} from './routes/profile/profile';
export const routes = [
{path: '', redirectTo: 'home'},
{path: 'home', component: Home},
{path: 'login', component: Login},
];
export const APP_ROUTES_PROVIDER = provideRouter(routes);
在第一行中,我們匯入 provideRouter
,以便我們可以讓我們的應用程式知道在引導階段期間的路由。
Home
和 Profile
只是兩個組成部分。你將需要匯入你需要的每個 Component
作為路線。
然後,匯出路由陣列。
path
:元件的路徑。你不需要使用’/ ……..’ Angular 會自動執行此操作
component
:訪問路由時要載入的元件
redirectTo
: 可選。如果你需要在使用者訪問特定路線時自動重定向,請提供此資訊。
最後,我們匯出配置的路由器。provideRouter
將返回一個我們可以提升的提供程式,以便我們的應用程式知道如何處理每個路由。