如何在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/