场景

Ionic介绍以及搭建环境、新建和运行项目：


在上面搭建起Ionic项目后

怎样新建页面并进行页面之间的跳转。

注：

博客：
注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

Ionic创建页面

cd到项目目录

ionic g page 页面名称

比如新建一个新闻news页面

ionic g page news

 

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_ionic

新建页面后会在app-routing.moudule.ts中自动添加路由

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_Ionic_02

 

ionic在页面之间跳转

前面已经新建了news页面，那么在tab1中怎样跳转到news页面

首先在tab1.page.html中新增一个button,然后设置其router-link为上面新建的news页面

<ion-button [routerLink]="['/news']" expand="block" fill="clear" shape="round">
    Click me
  </ion-button>

tab1.page.html完整代码

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-button [routerLink]="['/news']" expand="block" fill="clear" shape="round">
    Click me
  </ion-button>
</ion-content>

然后来到news.page.html,添加一个返回按钮

<ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>

news.page.html完整代码

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>news</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

效果

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_Ionic_03

 

Ionic新增底部页面

创建tab4页面模块

ionic g page tab4

 

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_ionic_04

修改根目录里app-routing.module.ts 文件里面的路由配置，去掉默认增加的路由

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_ico_05

 

tabs.router.module.ts 中新增路由

{
        path: 'tab4',
        loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)
      }

 

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_html_06

tabs.page.html 中新增底部tab 切换按钮

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 4</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

 

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_ico_07

运行项目看效果

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面_html_08