如何在Ionic 3項目中使用angular 4路由器？

Question

我正在開發一款混合應用程序。使用離子導航路由器很容易在頁面間導航，但它不使用瀏覽器的「URL路徑」。

我看到我們可以在ionicModule上指定我們的鏈接。每次你在某個地方導航時，都可以使用它來指定關聯的路徑，而離子會在你的瀏覽器上改變它。但使用它，如果刷新瀏覽器，應用程序將丟失，您必須返回主頁。

我認爲它可以簡單地使用角度路由器，但如何在離子3？

謝謝

Answer 1

首先，您在您的評論中引用了離子本機v3。然而，離子天然和離子不是同一回事。當您提出問題時，Ionic v3並未正式發佈，因此除非您使用測試版，否則我認爲您仍然使用v2。

您不需要URL路徑的角度路由器。在離子V2，你可以做這樣的：

app.module.ts

export const deepLinkConfig: DeepLinkConfig = { 
    links: [ 
    { component: Home, name: "home", segment: ""}, 
    { component: DetailPage, name: "detail", segment: "event/:id", defaultHistory: [Home] } 
    ] 
}; 

然後包括在您的進口：

IonicModule.forRoot(MyApp, {}, deepLinkConfig) 

您現在可以訪問的網頁上應用程序訪問https://example.com/或https://example.com/event/1。重新加載網站時，參數defaultHistory確保您仍然有導航欄導航回到上一頁。

離子V3，你可以使用IonicPage註解來配置你的路由：https://ionicframework.com/docs/nightly/api/navigation/IonicPage/