Search
Close this search box.
,

Tutorial Completo de «ion-router» o rutas en ionic en español

A continuación veras una guía completa y detallada sobre el enrutamiento en Ionic, que cubre a fondo el uso de los componentes ion-router, ion-router-link, ion-router-outlet, ion-route e ion-route-redirect. Este tutorial busca que programadores y desarrolladores, incluso sin experiencia previa, pueda comprender y aplicar el sistema de enrutamiento en Ionic de forma efectiva y atractiva.



Introducción al Enrutamiento en Ionic

El enrutamiento es una parte fundamental en el desarrollo de aplicaciones modernas. Ionic, basado en Angular, ofrece su propio sistema de enrutamiento con componentes especializados que facilitan la creación de aplicaciones fluidas y optimizadas para dispositivos móviles. En esta guía aprenderás a configurar, personalizar y manejar el enrutamiento en Ionic de principio a fin.

Componentes Clave para el Enrutamiento en Ionic

Los componentes que veremos en este tutorial son:

  1. ion-router: El núcleo del sistema de enrutamiento de Ionic.
  2. ion-router-link: Componente para generar enlaces de navegación interna.
  3. ion-router-outlet: Contenedor de la página que cambia según la ruta activa.
  4. ion-route: Define cada ruta de la aplicación.
  5. ion-route-redirect: Permite redirigir de una ruta a otra.

Paso a Paso para Configurar el Enrutamiento en Ionic

Paso 1: Crear un Nuevo Proyecto en Ionic

Si no tienes un proyecto de Ionic, comienza creando uno. Usa la plantilla de tabs para incluir una navegación básica que después mejoraremos. Abre tu terminal y escribe:

ionic start IonicRoutingTutorial tabs --type=angular
cd IonicRoutingTutorial

Paso 2: Estructura de Archivos y Dependencias

Dentro de la carpeta src/app/, encontrarás app-routing.module.ts, el archivo principal donde se configuran las rutas. Verifica que todas las dependencias están instaladas ejecutando npm install. Este archivo es crucial, ya que define cómo se navega dentro de la aplicación.


Paso 3: Introducción a ion-router y ion-route

En Ionic, ion-router es el componente que gestiona las rutas y controla la navegación de la aplicación. Aunque ion-router no se declara explícitamente, sus funcionalidades se integran directamente con ion-route, el componente que representa cada ruta. Abre app-routing.module.ts y asegúrate de tener algo similar a lo siguiente:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutPageModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./contact/contact.module').then(m => m.ContactPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Paso 4: Explicación Detallada de la Configuración de app-routing.module.ts

  • redirectTo: 'home': Redirige la ruta raíz (/) a la página de inicio (home).
  • loadChildren: Carga cada módulo de página de manera diferida (lazy loading), optimizando el rendimiento.

Cada ruta apunta a un módulo específico, como HomePageModule, AboutPageModule y ContactPageModule, que representan las páginas home, about y contact, respectivamente.


Paso 5: Creación de las Páginas y Módulos Secundarios

Crea las páginas About y Contact con el siguiente comando:

ionic generate page about
ionic generate page contact

Esto generará los módulos correspondientes (about y contact) con su estructura de componentes y rutas definidas. Cada página ahora tiene su propio módulo, lo que facilita el manejo y optimiza el rendimiento.


Paso 6: Uso de ion-router-outlet para la Visualización de Páginas

En el archivo app.component.html, el componente ion-router-outlet es el lugar donde se carga el contenido de la ruta activa. Asegúrate de que app.component.html contenga el siguiente código:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

Explicación: ion-router-outlet actúa como un contenedor dinámico que se actualiza con el contenido de cada ruta. Cuando la ruta cambia, el contenido de ion-router-outlet se reemplaza por la página correspondiente.


Paso 7: Navegación Interna con ion-router-link

ion-router-link permite crear enlaces entre páginas sin recargar la aplicación. Esto optimiza la experiencia de usuario y crea una transición fluida. Agrega enlaces a about y contact desde home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Página de Inicio</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-router-link routerLink="/about">Ir a About</ion-router-link>
    </ion-item>
    <ion-item>
      <ion-router-link routerLink="/contact">Ir a Contact</ion-router-link>
    </ion-item>
  </ion-list>
</ion-content>

Explicación: Al usar ion-router-link, Ionic intercepta la navegación y carga la nueva ruta en ion-router-outlet sin refrescar la página.


Paso 8: Redirección de Rutas con ion-route-redirect

Para redirigir de una ruta a otra, utiliza ion-route-redirect. Esto es útil para manejar URLs incorrectas o desactualizadas. Configura una redirección global en app-routing.module.ts:

{
  path: '**',
  redirectTo: 'home',
  pathMatch: 'full'
}

Con esto, cualquier URL desconocida llevará al usuario a home.


Paso 9: Mejorando la Experiencia Visual con CSS Personalizado

Vamos a agregar estilo personalizado para mejorar la apariencia de los enlaces de navegación. Abre home.page.scss y añade:

ion-content {
  --background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  padding: 20px;
}

ion-item {
  --background: #ffffff;
  border-radius: 8px;
  margin: 10px 0;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}

Explicación de Estilos:

  • ion-content: Fondo con degradado suave.
  • ion-item: Bordes redondeados y sombra ligera para destacar cada elemento.

Paso 10: Agregar una Barra de Navegación en Todas las Páginas

Para facilitar la navegación entre páginas, agrega una barra de navegación en app.component.html:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Navegación</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-router-link routerLink="/home">Inicio</ion-router-link>
    </ion-item>
    <ion-item>
      <ion-router-link routerLink="/about">Acerca de</ion-router-link>
    </ion-item>
    <ion-item>
      <ion-router-link routerLink="/contact">Contacto</ion-router-link>
    </ion-item>
  </ion-list>
</ion-content>

Paso 11: Añadir Animaciones para Transiciones de Página

Ionic permite animar las transiciones de página. Para implementar animaciones, ve a home.page.ts y configura una animación de transición:

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

constructor(private animationCtrl: AnimationController) {}

ngOnInit() {
  const animation = this.animationCtrl.create()
    .addElement(document.querySelector('.page-content'))
    .duration(500)
    .fromTo('opacity', '0', '1');
  animation.play();
}

Paso 12: Prueba de la Aplicación en el Navegador

Para ver tu aplicación en acción, ejecuta:

ionic serve

Prueba cada enlace y observa cómo ion-router-outlet carga cada página sin recargar la aplicación.


Paso 13: Ejecución de Pruebas en Dispositivos Reales

Para asegurarte de que todo funcione en dispositivos móviles, ejecuta:

ionic capacitor run android
ionic capacitor run ios

Prueba la navegación y redirección

en cada dispositivo y verifica que las animaciones se vean bien en cada uno.


Conclusión

Este tutorial ha cubierto en profundidad el enrutamiento en Ionic, permitiéndote crear una estructura de navegación robusta. Desde ion-router hasta ion-route-redirect, hemos explorado cómo cada componente facilita la construcción de aplicaciones fluidas y dinámicas. Ahora tienes las herramientas para crear una aplicación de navegación avanzada en Ionic.

Comparte:
Contactanos

Posts Populares

Scroll al inicio