如何在IONIC 3中使用路由

Question

我正在开发一个Ionic 3应用程序。现在我正在使用NavController来路由和切换页面。

例如：this.navCtrl.push(DetailsPage);

但我现在需要使用Angular路由。

我为Ionic 2找到了类似的question，但这也适用于Ionic 3吗？

有人可以详细说明吗？

Answer 1

检查此链接以获取navcontroll link的详细信息。您必须导入到当前的ts文件中。接着是：=＆gt;

我们可以在离子

中使用两种导航方式

1）DeepLink

2）组件导航stak

<强>深层链接

深层链接导航就像下面的网页导航一样   你必须使用@ionicpage anotation来使用深层链接导航

  

https://locallhost:8000/#/HomePage/SecondPage

组件导航

您必须在尊重的ts文件中导入组件才能导航

Totaly有三个关键词push，pop，setRoot。

1. <强> setRoot

   示例：

     

   this.navCtrl.setRoot（首页）;

        

   （或）

        

   this.navCtrl.setRoot（＆＃34;首页＆＃34）; // DeepLink导航

   用于将组件设为Root页面，换句话说，它创建一个空的导航堆栈，其中主页是根。

2. <强>推

   示例：

     

   this.navCtrl.push（SecondPage）;

        

   （或）

        

   this.navCtrl.push（＆＃34; SecondPage＆＃34）; // DeepLink导航

   上面的示例有push关键字，其中导航堆栈在其堆栈中有一个组件，后跟Homepage.i表示在主页组件之后，您将在导航堆栈中有第二个页面组件。

3的弹出

示例：

  

this.navCtrl.pop（）;

     

（或）

     

this.navCtrl.pop（）; // DeepLink导航

考虑到你现在在第二页，并希望回到上一页，这是主页然后只需使用上面的例子，它将从导航堆栈弹出一个组件，并只为你提供导航堆栈中的主页组件

Answer 2

您可以使用Ionic deep links。

来自doc：

的示例

@IonicPage({
  name: 'my-page',
  segment: 'some-path'
})

当导航到此页面作为应用程序中的第一页时，URL将如下所示：

http://localhost:8101/#/some-path

关于它的好文章： Link to Pages via URLs with Deep Linking in Ionic

Answer 3

我们大多使用3件事

1. this.navCtrl.push（ “页面名称”）
2. this.navCtrl.pop（ “页面名称”）
3. this.navCrl.setRoot（ “页面名称”）

Answer 4

主要是我们使用Ionic 3提供的导航路由。您必须更喜欢：

1. this.navCtrl.push("pagename")
2. this.navCtrl.pop("pagename")
3. this.navCtrl.setRoot("pagename")

另外，如果您正在寻找Ionic 3的TabsModule，请使用：

1. this.navCtrl.parent.select(tab or index)