CÓMO ENRUTAR COMPONENTES EN VUE.JS (ROUTER VUE.JS)

Al hacer nuestros proyectos o aplicaciones normalmente siempre solemos tener varias páginas que queremos que visite el usuario.

Para conseguir una correcta navegación front-end del usuario es necesario usar un enrutador(componente que sirve para enlazar unas páginas con otras posibilitando la navegación entre componentes de nuestro  proyecto).

Cada framework de Javascript suele usar su propio enrutador(Router) y en este caso nos vamos a centrar en ver cómo usar el Router de vue.js.

Cuando trabajamos con Vue en un proyecto de una sola página el navegador no necesita enviar al servidor ningún cambio en la URL  ya que siempre estaremos trabajando en la misma página, entonces el navegador simplemente recarga la misma URL todo el rato. Por ejemplo: http://ejemploroutervue.com

Pero cuando el navegador solicita una URL distinta, por ejemplo:

URL solicitada por el navegador: http://ejemploroutervue.com/pagina1

Entonces es cuando le toca a Vue determinar que contenido mostrar y para eso se usa el Router. Una vez conocida la función del Router , en este post vamos a ver como se usa y como poder implementarlo en nuestros proyectos Vue de manera sencilla.

Requisitos Previos:

-1. El primer requisito fundamental es tener descargado node.js.

Link de descarga: https://nodejs.org/es/download/

-2. Otro requisito fundamental es tener instalado Vue.

Para ello abrimos una cmd (Windows) o la terminal(Mac) y escribiremos lo siguiente: npm install -g @vue/cli

-3. Creamos nuestro proyecto vue y dentro de la carpeta de este accediendo con la cmd instalaremos el paquete para el router: npm install vue-router@next –save

Cómo empezar a usar e implementar el Router

Abrimos nuestro proyecto vue en nuestro entorno de desarrollo favorito, yo en este caso usaré Visual Studio Code.

Una vez abierto nuestro proyecto crearemos un nuevo archivo dentro de la carpeta llamada “src”.

Este nuevo archivo será nuestro router, así que lo vamos a nombrar como Router.js

Una vez que hayamos creado el archivo nombrado Router.js es necesario crear los componentes del proyecto que queremos enrutar, así que crearemos dentro de la carpeta llamada componentes los componentes que queramos para nuestro proyecto, en este caso nos crearemos tres, llamados: HomeComponent.vue, FutbolComponent.vue y BasketComponent.vue.

Si nos fijamos en nuestra carpeta components, veremos que por defecto venía un componente llamado HelloWorld.vue, muy bien pues podemos borrar ese archivo y hacer lo siguiente:

Una vez eliminado el componente HelloWorld, crearemos otro nuevo componente dentro de components llamado MenuRutas.vue. Este componente será un menú de navegación para nuestro proyecto cuya función será facilitar la navegación al usuario.

CREAR MENUCOMPONENTES.VUE

Definimos un template para vue y dentro de dicho <template> añadiremos un navbar.

Para el estilo de dicho navbar necesitaremos meter Bootstrap a nuestro proyecto.

Para enlazar nuestro proyecto con Bootstrap iremos a la carpeta public y dentro de esta accedemos al archivo index.html. Dentro de index.html tenemos que pegar estas dos líneas para poder usar Bootstrap:

En el head: <link href=»https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css» rel=»stylesheet» integrity=»sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65″ crossorigin=»anonymous»>

En el body pegaremos:     <script src=»https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js» integrity=»sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4″ crossorigin=»anonymous»></script>

Después de esto ya podemos usar Bootstrap en nuestro menú de navegación.

Para el navbar usaremos el primer navbar de ejemplo que viene en la página de Bootstrap aunque lo modificaremos un poco para nuestro proyecto.

Dicho navbar está en este link: https://getbootstrap.com/docs/5.2/components/navbar/

Borramos todos los elementos que no vamos a usar, y nos quedamos solo con este código dentro de MenuRutas.vue:

Visualmente nuestro MenuRutas quedará así:

Una vez creado el componente MenuRutas.vue, nos dirigimos al archivo llamado App.vue dentro de “src”, y si nos fijamos en su template vemos que tiene la imagen para el logo de vue y el componente que acabamos de eliminar HelloWorld. Muy bien necesitamos ahora eliminar tanto la foto del logo(<img>) como la etiqueta <HelloWorld/>. A su vez tendremos que eliminar HelloWorld en el export default dentro de components  y eliminar el import justo de debajo del <script>.

Una vez eliminados podremos meter dentro del template nuestro MenuRutas.vue , una vez incorporado <MenuRutas/> en el template de App.vue , necesitamos importar dicho componente con un import y por último debemos definir dicho componente(MenuRutas) dentro de export default.

Ya hemos enlazado nuestro menú de rutas a nuestro proyecto, ahora debemos empezar a definir dichas rutas en nuestro archivo Router.js.

Crear el router dentro de Router.js

Antes de ponernos a construir el router vamos a poner contenido a nuestros componentes Home, Futbol y Basket. En este caso vamos a meter un titulo para cada componente y un gif relacionado con dicho componente. (Los gifs los guardaremos en una nueva carpeta llamada images dentro de assets.

Ejemplo: HomeComponent.vue

Ahora ya si vamos a empezar a construir nuestro router, vamos al archivo Router.js que hemos creado y allí empezaremos a hacer operativo nuestro router.

Para empezar, debemos importar los elementos createRouter y createWebHistory del router de vue. Para ello escribiremos:

Import { createRouter , createWebHistory } from ‘vue-router’

A continuación, debemos importar los componentes los cuales queremos enrutar, en nuestro caso debemos de importar HomeComponent, FutbolComponent y BasketComponent.

Ya tenemos importados los componentes que queremos enrutar ahora es el momento de crear las rutas.

Para ello definiremos una constante llamada routes la cual será un array de objetos donde cada objeto contenga la ruta para cada componente a enrutar.

Dentro de cada objeto en routes, tendremos un path: que es el nombre de la ruta y el component que indica el elemento al que va dirigida la ruta.

Nota*: Los path en vue siempre tienen que empezar con /

Se ve mejor visualmente:

Ahora por último, debemos crear una constante router y definirla como un nuevo CreateRouter. Dentro definimos la historia y las rutas del router y por último exportamos como default el Router para que pueda ser usado.

De esta forma ya tendremos construido nuestro router donde el código ha quedado así:

Posdata: Para pasar  o recoger valores a través del router es necesario poner :nombrevalor dentro del path. Ejemplo -> /equipofutbol/nombre En este ejemplo se recogerá el nombre.

Lo siguiente que tenemos que hacer es ir a MenuRutas para terminar de definir y enlazar las rutas.

Lo primero que debemos de hacer dentro de MenuRutas.vue es cambiar las etiquetas <a> por etiquetas <router-link>

Una vez hayamos cambiado todas las <a> por <router-link> definiremos las rutas de dichos router-link.

Por ejemplo para la ruta de Futbol:

Definimos su estilo con Bootstrap y definimos su ruta con to: ,la ruta debe de ser la misma que la que hemos puesto y definido en Router.js

Haremos lo mismo con las demás rutas:

Ya tendríamos todo funcional, solo nos quedaría mostrar el contenido de los componentes del router, y para ello usaremos <router-view>.

Tenemos que acceder de nuevo al archivo App.vue donde hemos estado trabajando antes y en el <template> justo debajo de <MeuRutas> añadimos el <router-view>

En resumen ya podríamos probar nuestro proyecto y comprobar efectivamente que hemos posibilitado la navegación entre componentes de nuestra página.

Autor: Javier Pantoja León

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS

Centro: Tajamar 

Año académico: 2022-2023 

Código / recursos utilizados / Otros datos de interés: https://github.com/javierpantoja1998/routervue.git