設定路由

注意:此示例基於 @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,以便我們可以讓我們的應用程式知道在引導階段期間的路由。

HomeProfile 只是兩個組成部分。你將需要匯入你需要的每個 Component 作為路線。

然後,匯出路由陣列。

path:元件的路徑。不需要使用’/ ……..’ Angular 會自動執行此操作

component:訪問路由時要載入的元件

redirectTo可選。如果你需要在使用者訪問特定路線時自動重定向,請提供此資訊。

最後,我們匯出配置的路由器。provideRouter 將返回一個我們可以提升的提供程式,以便我們的應用程式知道如何處理每個路由。