ionic 导航

Ionic 导航（Routing）完整实战指南

（Ionic 7+ 最新版，适用于 Angular / React / Vue，这里以 Angular 为例，其他框架思路完全一样）

1. 最新推荐架构（2025 年主流写法）

<!-- app.component.html（根布局）-->
<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

不再需要 <ion-tabs> 包裹整个应用！用纯路由 + TabsLayout 页面来实现底部 Tab。

2. 完整路由配置（app-routing.module.ts）

const routes: Routes = [
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'login',
    loadComponent: () => import('./login/login.page').then(c => c.LoginPage)
  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full'
  }
];

3. 底部 Tab 布局（tabs.page.html）—— 2025 最优雅写法

<!-- tabs.page.html -->
<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" href="/tabs/home">
      <ion-icon name="home-outline"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="category" href="/tabs/category">
      <ion-icon name="grid-outline"></ion-icon>
      <ion-label>分类</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="cart" href="/tabs/cart">
      <ion-icon name="cart-outline"></ion-icon>
      <ion-label>购物车</ion-label>
      <ion-badge color="danger" *ngIf="cartCount">{{cartCount}}</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="profile" href="/tabs/profile">
      <ion-icon name="person-outline"></ion-icon>
      <ion-label>我的</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

// tabs-routing.module.ts（子路由）
const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      { path: 'home',     loadComponent: () => import('../home/home.page').then(c => c.HomePage) },
      { path: 'category', loadComponent: () => import('../category/category.page').then(c => c.CategoryPage) },
      { path: 'cart',     loadComponent: () => import('../cart/cart.page').then(c => c.CartPage) },
      { path: 'profile',  loadComponent: () => import('../profile/profile.page').then(c => c.ProfilePage) },
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  }
];

4. 页面跳转 5 种最常用方式（直接复制）

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) {}

// 1. 推荐！相对路径跳转（自动处理返回栈）
this.navCtrl.navigateForward('/tabs/cart');
this.navCtrl.navigateBack('/tabs/home');

// 2. 绝对路径跳转（最清晰）
this.navCtrl.navigateRoot('/tabs/profile');

// 3. 带参数跳转
this.navCtrl.navigateForward('/product/123');

// 4. 替换当前页面（登录后跳转首页常用）
this.navCtrl.navigateRoot('/tabs/home', { replaceUrl: true });

// 5. 返回上一页（比 location.back() 更丝滑）
this.navCtrl.back();

5. 页面间传参（3 种方式任选）

// 方式1：路由参数（推荐）
{ path: 'product/:id', loadComponent: ... }

// 跳转
this.navCtrl.navigateForward('/product/123');

// 接收（product.page.ts）
constructor(private route: ActivatedRoute) {
  this.id = this.route.snapshot.paramMap.get('id');
}

// 方式2：查询参数
this.navCtrl.navigateForward('/search', { queryParams: { keyword: '手机' } });

// 方式3：全局服务传参（跨多层页面）

6. 页面生命周期（必须掌握！）

ionViewWillEnter() { /* 每次进入页面（包括返回）都会执行，最常用！*/ }
ionViewDidEnter()  { /* 页面完全展示后 */ }
ionViewWillLeave() { /* 离开前 */ }
ionViewDidLeave()  { /* 离开后 */ }

7. 隐藏底部 TabBar（3 种优雅方案）

<!-- 方案1：在要隐藏的页面加类（最简单）-->
<ion-content class="ion-padding hide-tabbar">

/* global.scss */
.hide-tabbar + ion-tab-bar {
  display: none !important;
}

// 方案2：动态控制（推荐）
import { IonTabs } from '@ionic/angular';
@ViewChild(IonTabs) tabs!: IonTabs;

ngAfterViewInit() {
  this.tabs.select('home'); // 可编程切换 tab
}

8. 路由守卫（登录拦截）

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    if (!this.auth.isLoggedIn()) {
      this.navCtrl.navigateRoot('/login');
      return false;
    }
    return true;
  }
}

9. 一句话总结最优雅导航结构（2025 推荐）

app-routing.module.ts
 └── tabs/
      ├── tabs.page.html（放 <ion-tabs>）
      └── tabs-routing.module.ts（子路由）
           ├── home.page
           ├── category.page
           ├── cart.page
           └── profile.page

这样写出来的导航：

• iOS 有原生滑动返回手势
• Android 有完美返回栈
• Tab 切换丝滑不闪
• 支持懒加载、路由守卫、参数传递

需要我直接发你一个「完整可运行的 Ionic 7+ 标准项目模板（带底部 Tab + 登录页 + 路由守卫 + 懒加载）」吗？一句话就打包发你～