二、配置新的路由页面

一、新配置一个路由页面

ionic g page views/detail

二、在tab1中跳转

//跳转方式和angular一样
<ion-content>
    <ion-button [routerLink]="['/detail']" routerLinkActive="router-link-active" >
      跳转detail
    </ion-button>
</ion-content>

三、detail页面中跳回前一个页面

<ion-header>
  <ion-toolbar>
   //++
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    //+
    <ion-title>detail</ion-title>
  </ion-toolbar>
</ion-header>

四、app.module.ts文件说明

//ionic angular核心文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
//ionic打包成app以后配置启动该画面以及导航条的服务
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
//引入路由的配置文件
import { AppRoutingModule } from './app-routing.module';
//根组件
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent], //声明组件
  entryComponents: [], //配置不会在模板中使用的组件
  //引入依赖的模块
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  //配置服务
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

五、新增底部导航

5-1 新增模块

ionic g page tab4

5-2 删除app-routing.module.ts中自动配的路由

5-3tabs-routing.module.ts中新增路由

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

5-4 tabs.page.html中配置

//++ 新添加导航
<ion-tab-button tab="tab4">
      <ion-icon name="logo-octocat"></ion-icon>
      <ion-label>Tab Four</ion-label>
</ion-tab-button>