如何在Ionic 3项目中使用Angular 4 Router？

Question

我正在开发一款混合应用程序。通过Ionic的导航路由器，很容易在页面之间导航，但它不使用浏览器的“URL路径”。

我发现我们可以在ionicModule上指定我们的链接。每次导航到某个位置时，您可以指定相关联的路径，并且Ionic将在您的浏览器上更改它。但是，如果这样做，如果您刷新浏览器，则应用程序会丢失，您必须返回主页。

我认为可以简单地使用Angular路由器，但是在Ionic 3中如何实现呢？

谢谢

- Charly berthet

---

在 Ionic 3 项目中使用 Angular 4 路由器 - Mohan Gopi

Angular 4 > https://www.npmjs.com/package/@angular/core - Charly berthet

Ionic 3 > http://blog.ionic.io/ionic-native-3-x/ Ionic 3 > http://blog.ionic.io/ionic-native-3-x/ - Charly berthet

https://forum.ionicframework.com/t/ionic-3-beta-available-now/84411 - Suraj Rao

Answer 1

首先，你在评论中提到了ionic-native v3。然而，ionic-native和ionic不是同一件事。当你提出问题时，Ionic v3还没有正式发布，因此除非你使用了beta版本，否则我认为你仍在使用v2。

您不需要使用angular路由器来处理URL路径。在Ionic 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 参数确保你仍然拥有导航栏以返回到上一页。

在ionic v3中，你可以使用IonicPage注释来配置你的路由：https://ionicframework.com/docs/nightly/api/navigation/IonicPage/。

- Andreas Gassmann

---

谢谢，但是当我尝试重新加载页面时，仍然出现“ionic Cannot GET /”错误。 - Charly berthet

因为您没有URL重写。 - Georgy Grigoryev

有用的信息！（但并没有回答问题。） - Sensei James