ionic3 中使用ionicPage设置ionic的路由地址实现ionic3基于angular的路由

ionic3 如何设置路由地址实现类似于angualr的路由呢？

ionic3在微信公众号中如果没有路由地址我们是没法返回上一页的，也没法分享对应的链接

ionic为单页程序，没法实现类似原生那样回退历史页吗？ ionic路由不加地址的问题会导致h5无法完成支付问题。

下面我们就看看如何解决这个问题。

官方给我们提供了IonicPage这个api可以实现这个功能：

官方网址：

https://ionicframework.com/docs/api/navigation/IonicPage/

官方demo：

    https://github.com/robinsonaaron/ionicPage

现在运行官方ionicPage的demo

    1.首先github上面下载

    2.cd到对应目录 运行 npm install 或者cnpm install

    3.运行后你会发现官方的列子中ionic有类似angular的路由了。

现在看看官方ionicPage的demo中是如何实现的。

如我们从home首页跳转到my-page页面。我们以前需要在app.module.ts里面引入注入对应的my-page页面，现在不需要了

现在比如我们要从home页面跳转到my-page页面我们只需要做以下几步操作：

    1、my-page目录下面新建my-page.module.ts，如果你是用ionic page 名称生成的话它自动会给你创建。

    2、在my-page.ts中声明

    @IonicPage({
      name: 'your-page',
       segment: 'another-path/:id'
   }

    3、home 页面引入my-page'

        import { MyPage } from '../my-page/my-page';

    4、 home页面通过navCtrl.push跳转页面，注意上面第二部就是配置的路由。

    this.navCtrl.push('your-page', {
      'id': detailInfo.id
    });

Home页面:

my-page页面:

最后注意：官方的demo用上面的几步是可以实现的，但是我们现在创建的ionic3的项目实现不了。

如果我们的项目也要实现上面的功能，需要把官方的package.json复制到我们的项目里面，然后删除node_modules然后重新运行npm install/cnpm installl，这样的话我们的项目可以用上面的ionicPage实现ionic3基于angular的路由