ionic4 IonicPage 简单的路由模板(官方称为深层链接系统—— deep link system)

最新推荐文章于 2021-04-02 11:10:40 发布

MonsterHunterNO1

最新推荐文章于 2021-04-02 11:10:40 发布

阅读量2.7k

点赞数

分类专栏： ionic4 文章标签： ionic4 IonicPage 路由

本文链接：https://blog.csdn.net/MonsterHunterNO1/article/details/82852137

版权

ionic4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建三个文件

html、ts、module.ts

html：对应内容为要跳转的页面的内容

ts：将@IonicPage装饰器添加到组件
module.ts：在IonicPageModule.forChild导入页面模块时添加深层链接的页面

示例：
html：adv_plugin.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div>
  <a href="javasrcipt:void(0);" onclick="top.location.href = '/#/adv-content';">
    <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg"/>
  </a>
</div>
</body>

</html>

ts：adv_plugin.ts

import {IonicPage} from "ionic-angular";
import {Component} from "@angular/core";

@IonicPage({     //设置路由名称例：localhost:8100/#/adv-plugin   跳转 （注意需要加"/#/"）
  name: 'adv-plugin',
  segment: 'adv-plugin'
})

@Component({
  templateUrl: 'adv_plugin.html' //对应页面
})
export class AdvPlugin {

}

module.ts：adv_plugin.module.ts

import {AdvPlugin} from "./adv_plugin";
import {IonicPageModule} from "ionic-angular";
import {NgModule} from "@angular/core";

@NgModule({      //把下面三个AdvPlugin改成ts中的class
  declarations: [
    AdvPlugin   //对应ts中的名称
  ],
  imports: [
    IonicPageModule.forChild(AdvPlugin)
  ],
  entryComponents: [
    AdvPlugin
  ]
})
export class AdvPlugineModule {
}

三个文件写完。。就可以愉快的链接了

localhost:8100/#/adv-plugin （注意需要加"/#/"）

最后发一下官方教程：
https://ionicframework.com/docs/api/navigation/IonicPage/