Ionic創建頁面以及頁面之間跳轉、頁面添加返回按鈕、新增底部頁面

場景

Ionic介紹以及搭建環境、新建和運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166

在上面搭建起Ionic項目後

怎樣新建頁面並進行頁面之間的跳轉。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公衆號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

Ionic創建頁面

cd到項目目錄

ionic g page 頁面名稱

比如新建一個新聞news頁面

ionic g page news

 

新建頁面後會在app-routing.moudule.ts中自動添加路由

 

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新增底部頁面

創建tab4頁面模塊

ionic g page tab4

 

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

 

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

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

 

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>

 

運行項目看效果