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

问题描述

我正在开发一个混合应用程序。使用离子导航路由器，它很容易在页面之间导航，但它不使用浏览器的URL路径。

I am developing an hybrid app. With the navigation router of ionic it is easy to navigate between page but it does not use the "URL path" of browsers.

我看到我们可以在ionicModule上指定我们的链接。每次在某个地方导航时都可以使用它来指定关联的路径，离子将在浏览器中更改它。但是使用它，如果你刷新浏览器，应用程序就会丢失，你必须回到主页。

I saw that we can specifie on the ionicModule our links. Using that each time you navigate somewhere you can specifie the associated path and ionic will change it on your browser. BUT using that, if you refresh your browser the app is lost and you have to go back to the home page.

我认为可以简单地使用角度路由器，但在离子3中如何？

I thought it could be possible to simply use angular router, but how in ionic 3 ?

谢谢

推荐答案

首先关闭，您在评论中引用了离子原生v3。然而，离子 - 天然和离子不是一回事。当您提出问题时，Ionic v3尚未正式发布，因此除非您使用测试版，否则我认为您仍然使用v2。

First off, you are referencing ionic-native v3 in your comment. However, ionic-native and ionic are not the same thing. Ionic v3 was not officially released when you asked your question, so unless you used the beta version, I assume that you still use v2.

您不需要角度路由器用于URL路径。在Ionic v2中，您可以这样做：

You don't need angular router for URL paths. In Ionic v2, you can do it like that:

app.module.ts

app.module.ts

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

然后将其包含在您的导入中：

And then include it in your imports:

IonicModule.forRoot(MyApp, {}, deepLinkConfig)

您现在可以访问 https://example.com/ 或 https://example.com/event/访问您应用的页面1 。重新加载网站时， defaultHistory 参数确保您仍然可以使用导航栏导航回上一页。

You can now access the pages of your app by visiting https://example.com/ or https://example.com/event/1. When reloading the website, the defaultHistory parameter makes sure that you still have the navigation bar to navigate back to the previous page.

在离子v3中，您可以使用IonicPage注释来配置路线：

In ionic v3, you can use the IonicPage annotation to configure your routes: https://ionicframework.com/docs/nightly/api/navigation/IonicPage/

这篇关于如何在Ionic 3项目中使用angular 4路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！