場景

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>

?

運行項目看效果

?

總結

以上是生活随笔為你收集整理的Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。