Utilizar Vue Router para la navegación

Definición e instalación

1. Definición

Con una SPA (Single Page Application), el servidor envía un archivo index.html al navegador. No se cambia de página durante la navegación, ni se utilizan URL adicionales. Vue instancia los componentes de la página y los destruye dinámicamente.

También hablamos de «estado» de la aplicación para hacer referencia al contenido de la página en un momento determinado.

La desventaja para el usuario es que no puede acceder a un estado particular de la página con una URL, como se hace en un sitio web tradicional.

Por ejemplo, en el contexto de un blog, no es posible ir directamente a un artículo determinado y los botones Página anterior y Página siguiente del navegador no funcionan.

Para superar este problema, es necesario utilizar un enrutador que se utiliza para definir rutas. Una ruta designa una cadena de caracteres que se coloca después de la URL base de la aplicación:

http://www.dominio.com/mi_ruta

De esta manera una ruta puede corresponder a la visualización de uno o más componentes.

Para usar rutas en una aplicación Vue.js, usamos el plugin oficial Vue Router.

2. Instalación

a. Descargar el plugin o utilizar un CDN

Si no está usando un empaquetador de módulos y utiliza Vue.js como una simple librería en una aplicación existente, puede...

Utilización

1. Definición de una ruta

Para definir una ruta en el array rutas, usamos un objeto con las propiedades path, cuyo valor es la cadena de caracteres que se muestra en la URL, y la propiedad component, cuyo valor es el componente que se debe mostrar. Este objeto también se denomina itinerario de ruta:

import MiComponente1 from "@/views/MiComponente1" 
import MiComponente2 from "@/views/MiComponente2" 
 
const rutas = [ 
  { path: '/ruta1', component: MiComponente1 }, 
  { path: '/ruta2', component: MiComponente2 } 
]

Una ruta también puede tener propiedades adicionales, que veremos con más detalle más adelante.

Propiedades	Descripción
path	Cadena de caracteres obligatoria que se muestra en la URL del navegador.
component	Componente que se ha de mostrar para esta ruta.
name	Nombre de la ruta (consulte la sección Las rutas con nombre).
components	Asunto: {[name: string]: Component}. Permite mostrar varios componentes. La clave name se utiliza para vistas con nombre.
redirect	Cadena de caracteres, objeto de tipo nativo Location o función que devuelve uno de estos valores. Permite redirigir al usuario a otra ruta o URL (consulte la sección Las redirecciones).
props	Cadena de caracteres, objeto o función que devuelve uno de estos valores. Permite pasar dinámicamente uno o más valores a las props del componente que se ha de mostrar (consulte la sección Rutas dinámicas).
alias	Recibe como valor una cadena de caracteres o un array de cadenas de caracteres. Permite utilizar un alias que se mostrará en lugar de la propiedad path. Se utiliza especialmente con rutas anidadas si no desea mostrar los diferentes niveles de anidación en la URL. Después usamos el mismo alias para varias rutas anidadas (consulte la sección Las rutas anidadas).
children	Recibe como valor un array de rutas. Le permite definir rutas anidadas.
beforeEnter	Función que recibe tres parámetros: to: el objeto Route de la ruta de destino; from: el objeto Route de la ruta actual; next: función de callback para que se resuelva el hook. Esta función es un hook que se utiliza para realizar el procesamiento cuando pasa de una ruta a otra (ver la sección Los interceptores de navegación).
meta...

Navegación programada

1. Navegación programada con $router

a. $router.push() y $router.replace()

En realidad, el componente <router-link> llama al método push del objeto VueRouter. Puede recibir como argumento:

location: camino de la ruta u objeto que tiene las mismas propiedades que el objeto que se pasa a la prop del componente <router-link>;
onComplete: hook que se llama cuando se ha cargado la ruta;
onAbort: hook cuando se detiene la carga de la ruta (por ejemplo, redireccionamiento a otra ruta mientras tanto).

router.push(location, onComplete?, onAbort?);

Los parámetros que usan como sufijo un signo de interrogación son opcionales.

También se puede acceder al objeto VueRouter con la variable de instancia $router para todos los componentes.

Ejemplo de tratamiento tras hacer clic en un botón que redirige al usuario a otra ruta:

<template> 
  <button @click="operar">Pulse aquí</button> 
</template> 
 
<script> 
export default { 
  name: 'MiComponente', 
  methods: { 
    operar() { 
      console.log('carga de la ruta'); 
      this.$router.push("/route", function() { 
        console.log("carga de la ruta realizada"); 
      }) 
    } 
  } 
} 
</script>

Cuando se llama al método push, la ruta se guarda en el historial del navegador. Por tanto, es posible utilizar los botones Atrás y Adelante del navegador.

El método $router.replace() actúa de la misma manera que el método $router.push(), excepto que no hay una nueva entrada en el historial. La ruta de destino que se indica en el argumento reemplaza a la anterior.

b. $router.forward(), $router.back(), $router.go()

$router.back() es la función que se usa para volver a la ruta anterior en el historial del navegador y $router.forward() es la función que se usa para avanzar a la siguiente ruta.

$router.go() recibe como parámetro un entero que permite mover n posiciones en el historial del navegador:

this.$router.go(1); // === this.$router.forward() ...

Para ir más lejos

1. Las transiciones

a. El componente <transition>

Vue.js facilita la aplicación de efectos visuales de transición cuando se añade, modifica o elimina un elemento DOM.

Esto no lo abordaremos en este libro, pero puede consultar la documentación oficial para obtener más información:

https://es.vuejs.org/v2/guide/transitions.html

Dicho esto, veremos los conceptos básicos de una transición de entrada y de salida con una transición de tipo desvanecimiento. El componente actual se desvanecerá gradualmente (transición saliente) para aparecer gradualmente, en paralelo, el componente activado por la ruta de destino (transición entrante).

Hablamos de transición entrante para la inserción en el DOM del componente activado por la ruta de destino, y de transición saliente para la eliminación en el DOM del componente activado por la ruta actual.

Las transiciones se aplican de forma muy sencilla cuando se navega de una ruta a otra. Para eso, envolvemos el componente <router-view> en un componente <transtition>.

Este componente tiene una prop name, que recibe el nombre de la transición como valor. Usamos clases CSS prefijadas para el valor de esta propiedad, para describir en qué propiedad CSS del componente aplicamos un estado transitorio, para qué duración y el estado final que tendrá esta propiedad, una vez que se complete la transición.

// archivo MiComponente.vue 
 
<template> 
  <transition name="fade"> 
    <router-view /> 
  </transition> 
</template> 
 
<style> 
.fade-enter-active, .fade-leave-active { 
  transition: opacity .5s; 
} 
.fade-enter, .fade-leave-to { 
  opacity: 0; 
} 
</style>

Al cambiar las rutas, Vue.js comprueba si el elemento de destino, aquí <router-view>, tiene clases de transición aplicadas. Si es así, las aplica al elemento en el momento deseado, dependiendo de la clase CSS.

Cada transición de entrada...