🧭 3.5 Navigation dans une application Ionic-Vue

La navigation est un pilier d’une app mobile
On travaille avec :
- des écrans
- des piles de navigation
- des transitions animées
Ionic-Vue s’appuie sur Vue Router + une couche Ionic
- pour garantir une expérience native sur Android / iOS

🎯 Objectifs d'apprentissage

À la fin du chapitre, vous serez capables de :

Expliquer navigation linéaire vs non-linéaire
Expliquer le rôle de Vue Router dans Ionic-Vue
Structurer un router adapté au mobile
Implémenter les patterns courants :
- Stack, Tabs, Menu
Naviguer avec / sans paramètres
Contrôler :
- les transitions
- le bouton retour
Éviter les erreurs classiques de navigation hybride

🌐 Web vs 📱 Mobile

Pourquoi la navigation est différente ?

Web classique :

Navigation basée sur les URLs
Historique linéaire
Bouton retour = page précédente

Mobile :

Logique d’écrans
Organisation en piles (stacks)
Transitions animées natives
Bouton retour matériel / gestuel
Comportement cohérent avec :
- iOS (swipe back)
- Android (back button)

👉 Ionic adopte une logique mobile-first, même avec Vue Router dessous.

🧠 3.5.1 Principe général

Vue Router vs Ionic

Vue Router décide :

où l’app doit naviguer
Définition des routes
Gestion des URLs
Passage de paramètres
Navigation programmée : router.push(), router.replace(), etc.

Rôle d’Ionic (IonRouterOutlet)

Ionic décide :

comment la navigation est vécue par l’utilisateur
Gestion de la pile de navigation
Transitions animées natives
Bouton retour Android
Swipe back iOS
Conservation de l’état des pages

<IonRouterOutlet> :

remplace le <router-view /> classique
permet à Ionic de contrôler le cycle de vie des pages

À retenir

Vue Router décide où aller. Ionic décide comment on y va.

🗺️ 3.5.2 Navigation linéaire vs non-linéaire

Navigation linéaire (Linear routing)

Parcours séquentiel : écran après écran
Les écrans sont empilés dans une stack
Le bouton retour revient à l’écran précédent
Chemin souvent unique

Navigation linéaire – Exemple

Exemples typiques :

Onboarding :
- Accueil → Présentation → Inscription
Formulaire multi-étapes :
- Infos perso → Adresse → Paiement
Liste → Détail → Édition

En Ionic :

ion-router-outlet gère la pile
router.push() pour avancer
Bouton retour (Android / iOS) pour revenir

👉 C’est la forme la plus proche du comportement natif.

Limite de la navigation linéaire

Ne gère pas bien les expériences plus complexes :
- onglets (Tabs)
- sections parallèles
Difficile à utiliser pour des UIs avec plusieurs sections principales

C’est là que la navigation non-linéaire intervient.

Navigation non-linéaire (Non-linear routing)

L’utilisateur ne suit pas un chemin unique
Peut changer de section à tout moment
Chaque section a sa propre pile d’écrans
Le bouton retour reste dans la section courante

Exemple non-linéaire (Tabs)

Scénario (simplifié) :

Onglet Originals
On ouvre la vue Ted Lasso
On change d’onglet → Search
On revient sur Originals → on revoit Ted Lasso
Le bouton retour ramène à Originals (liste), pas à Search

Pourquoi ?

Chaque onglet est une pile indépendante
Le bouton retour ne change pas de tab, il remonte la pile de cet onglet

Attention à `router.go(-1)`

En non-linéaire, router.go(-1) peut :
- revenir à une mauvaise page
- casser la logique des piles par onglet
Les APIs type router.go() sont faites pour un historique linéaire

👉 Avec Ionic + Tabs → il faut laisser Ionic gérer la pile.

Synthèse : linéaire vs non-linéaire

Navigation linéaire

Stack unique
Retour = page précédente
Flux simples / guidés

Navigation non-linéaire

Plusieurs stacks (par onglet, par menu)
Retour reste dans la stack courante
Flux complexes, multi-sections

Quel pattern pour quel usage ?

Pattern	Type	Usage recommandé
Stack	Linéaire	Détails, formulaires, parcours guidés
Tabs	Non-linéaire	Sections principales de l’application
Menu	Non-linéaire	Sections secondaires / navigation globale

On peut combiner les patterns, mais il faut garder une logique claire.

📁 3.5.3 Structure du router Ionic-Vue

Fichier principal

Configuration dans : src/router/index.ts
On utilise :
- createRouter
- createWebHistory
- RouteRecordRaw

Exemple avec Tabs

// src/router/index.ts
import { createRouter, createWebHistory } from '@ionic/vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: () => import('@/views/TabsPage.vue'),
    children: [
      {
        path: 'home',
        component: () => import('@/views/HomePage.vue')
      },
      {
        path: 'settings',
        component: () => import('@/views/SettingsPage.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

Bonnes pratiques router

Définir un point d’entrée clair (redirect)
Utiliser le lazy loading :
- () => import('...')
Laisser IonRouterOutlet gérer :
- pile d’écrans
- animations
- état des pages

📑 3.5.4 Navigation par onglets (Tabs)

Composants utilisés

ion-tabs : conteneur des onglets
ion-tab-bar : barre d’onglets (souvent en bas)
ion-tab-button : bouton d’onglet
ion-router-outlet : zone qui change selon la route

Exemple Tabs

<template>
  <ion-tabs>
    <ion-router-outlet />

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="home" href="/tabs/home">
        <ion-label>Accueil</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="settings" href="/tabs/settings">
        <ion-label>Paramètres</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</template>

Comportement des Tabs

Chaque onglet a sa propre stack
Changer d’onglet ne vide pas l’historique
Le bouton retour :
- reste dans l’onglet courant
- remonte l’historique de cet onglet

🔁 3.5.5 Navigation entre pages (Stack)

Navigation programmée (Vue Router)

import { useRouter } from 'vue-router'

const router = useRouter()

function goToDetails () {
  router.push('/details')
}

Navigation déclarative (`router-link`)

<ion-button router-link="/details">
  Voir détails
</ion-button>

Avantages :

Simple
Lisible

Limites :

Pas de logique avant la navigation :
- pas de validation de formulaire
- pas de confirmation

🧠 3.5.6 `useIonRouter` – Navigation avancée

Pourquoi `useIonRouter` ?

router-link :
- ne permet pas d’exécuter du code avant navigation
router.push seul :
- ne contrôle pas les animations Ionic

useIonRouter combine :

la navigation programmée
avec le contrôle des transitions mobiles

Exemple `useIonRouter`

import { useIonRouter } from '@ionic/vue'

const ionRouter = useIonRouter()

function goToDetails () {
  // ex : valider un formulaire avant
  ionRouter.push('/details', 'forward')
}

2ᵉ paramètre = direction :
- 'forward'
- 'back'
- 'root'

👉 Permet de rester cohérent avec les animations natives (push / pop).

📜 3.5.7 Passage de paramètres

Route paramétrée

{
  path: '/notes/:id',
  component: () => import('@/views/NoteDetailPage.vue')
}

Navigation avec paramètre

router.push(`/notes/${note.id}`)

Récupération du paramètre

import { useRoute } from 'vue-router'

const route = useRoute()
const noteId = route.params.id

On peut ensuite charger la note correspondante (API, store, etc.).

🔙 3.5.8 Retour & transitions

Gestion automatique par Ionic

Bouton retour Android
Swipe back iOS
Transitions cohérentes avec la plateforme

Bouton retour dans le header

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/home" />
    </ion-buttons>
    <ion-title>Détail</ion-title>
  </ion-toolbar>
</ion-header>

default-href : route utilisée si la pile est vide

À éviter absolument

window.history.back()
router.go(-1)