Una vez que ya hemos creado un proyecto con la CLI de Vue (usando Buefy, por ejemplo) podemos agregarle otros paquetes como un enrutador.
Vue Router es el enrutador oficial para Vue.Js y permite crear Aplicaciones de una sola página o Single Page Applications.
De esta manera tenemos una navegación más fluida sin recargar la página, ahorrando ancho de banda y agregando velocidad.
En este post vamos a ver cómo instalar y configurar el enrutador de Vue usando NPM, además de configurar las rutas para que coincidan con nuestros componentes.
Me parece que la versión 4 del router no es compatible con Vue 2. En mi caso lo instalé con la Vue CLI con vue add router
.
De todos modos la guía del router v3 está aquí. La versión que yo tengo es la 3.5.3 y se puede instalar así: npm install vue-router@3.5.3
Puedes seguir la guía ya que sigue funcionando pero es para Vue 2 con el Router versión 3.
Primero debes instalar NPM o actualizar la versión que tengas. Dirígete a la carpeta del proyecto y ejecuta:
npm install --save vue-router@3.5.3
Eso modificará tu package.json agregando la dependencia. La instalación debe verse así:
Con eso habremos instalado la dependencia del enrutador de Vue.
Para usar el enrutador de Vue.js y crear SPA’s debemos crear un archivo de rutas, el cual estará dentro de la carpeta src/router y tendrá el nombre de index.js.
Lo hacemos de esta manera para separar las cosas. El contenido del archivo es el siguiente, en donde importamos el router y exportamos un arreglo de rutas:
Las primeras dos líneas importan a Vue y al router. En las siguientes líneas importamos componentes que todavía no creamos y que vamos a crear más abajo (cada componente se relaciona con una ruta).
La parte más importante es exportar un nuevo Router que tiene un arreglo de objetos con las siguientes propiedades:
Recomiendo hacerlo de esta forma porque cada componente coincide con una ruta, y no te preocupes, se pueden usar componentes dentro de otros componentes.
Cuando hayas creado el archivo recuerda importarlo en el main.js con la siguiente línea de código:
import router from "./router"
Además de eso, cuando se crea la app (con new Vue
) debes indicar el router. Así:
Con eso tenemos las rutas configuradas. Si quieres más rutas simplemente modifica el arreglo e importa los demás componentes.
No olvides colocar el componente <router-view/>
en el lugar en donde quieres que se muestre el componente actual. Normalmente lo harás dentro de App.vue
; en mi caso queda así:
Cuando configuramos el enrutador no existían los componentes, ahora vamos a crearlos.
Su ubicación está en src/components. El componente Hola.vue es el siguiente:
De igual manera el componente Perfil.vue es el siguiente:
Ya tenemos los componentes y el enrutador.
En nuestro componente principal (normalmente App.vue) debemos poner un componente llamado <router-view/>
que tendrá la vista actual, es decir, la plantilla que vamos a renderizar de acuerdo a la ruta.
Además de la vista del enrutador debemos poner enlaces que van a llevar a los componentes. Pueden hacerse así:
Eso va a renderizar un enlace (bueno, un elemento <a>
). La clase no es necesaria, pero es un ejemplo de cómo podemos añadir clases para que se rendericen con el enlace.
Fíjate en el atributo to
, que coincide con el nombre de la ruta que configuramos en el enrutador.
Los enlaces pueden ser colocados en un menú de navegación o cualquier otra cosa, siempre y cuando sean enlaces. Yo los puse en un navbar de Bulma CSS.
Ahora es momento de probar. Ejecuta tu app con npm run serve
. El componente Hola
cuya ruta es la raíz /
se ve así:
Fíjate que únicamente cambia lo que está después del numeral #
. Si hago click en Perfil
se ve esto:
Ahora la ruta es /perfil
.
El menú de navegación se mantiene, pues solo cambia lo que existe dentro de <router-view/>
. Es decir, solo cambia lo del contenedor, y el contenedor puede ser colocado en cualquier lugar.
Obviamente en este caso los componentes tienen un encabezado y ya, pero en la vida real podrían ser mucho más complejos, solo estaba poniendo un ejemplo.
Un poco tardado pero gracias a esto podremos separar la lógica de nuestros componentes para crear una SPA con Vue JS y Vue Router.
Te invito a ver la documentación oficial del enrutador.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.