Creación de Aplicaciones SPA con Vue Router

Clase 29 de 38 • Curso Básico de Vue.js 2

Resumen

¿Cómo crear una Single Page Application (SPA) con Vue?

El universo de desarrollo web está lleno de términos y conceptos que pueden parecer complejos a primera vista, pero que, una vez comprendidos, fortalecen nuestras habilidades como desarrolladores. Uno de esos conceptos es el de las Single Page Applications (SPAs), aplicaciones de una sola página. En esta guía, vamos a descubrir cómo podemos implementar una SPA utilizando Vue.js y su herramienta de enrutamiento, Vue Router.

¿Qué es una SPA?

Una Single Page Application (SPA) es una aplicación web que consta de un solo documento HTML que se actualiza dinámicamente a medida que el usuario interactúa con ella.

Estructura inicial: La página contiene una estructura HTML básica con un header o footer común.
Cambio de contenido: El contenido principal se actualiza según la ruta o URL sin recargar toda la página.

Esto significa que al cambiar la URL, sólo el contenido central se modifica, haciendo la experiencia de usuario más rápida y fluida.

¿Cómo configurar Vue Router?

Vue Router es una biblioteca oficial para Vue.js que permite gestionar las rutas en nuestras SPAs. A continuación, te guiaré a través del proceso de configuración básica.

Instalación de la dependencia: Desde la terminal, ejecuta el siguiente comando para instalar Vue Router:
```
npm install vue-router --save
```
Esto añadirá Vue Router a tu archivo package.json dentro de las dependencias.

Crear un archivo de configuración para las rutas: Dentro de tu proyecto crea un archivo routes.js o similar. Este archivo es donde definiremos nuestras rutas.

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: HomeComponent
    },
    {
      path: '/about',
      name: 'About',
      component: AboutComponent
    }
  ]
});

En este archivo, definimos las rutas y los componentes que estas rutas deben renderizar. El modo 'history' permite una navegación tipo histórico con URLs limpias.

¿Cómo se muestran los componentes en base a las rutas?

En el archivo principal (comúnmente App.vue), utilizaremos los componentes brindados por Vue Router:

Router-view: Es un componente crucial que se encarga de mostrar el componente asociado a la ruta actual.
```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
```
Router-link: Facilita la navegación entre rutas internas de la aplicación.
```
<router-link to="/home">Home</router-link>
```

¿Cómo gestionar las rutas no existentes?

Un aspecto esencial en toda aplicación es manejar errores, como cuando un usuario intenta acceder a una ruta que no existe. Para ello, Vue Router nos permite definir estrategias para rutas no encontradas.

Ruta "catch-all": Podemos definir una ruta con un comodín * para interceptar todas las URLs no definidas.
```
{
  path: '*',
  component: NotFoundComponent
}
```

¿Qué es lo siguiente?

Hemos cubierto las bases para configurar una Single Page Application con Vue.js utilizando Vue Router. Esto nos abre un mundo de posibilidades para desarrollar aplicaciones dinámicas y eficaces.

La próxima vez nos adentraremos en la interacción con APIs, permitiendo que nuestras aplicaciones obtengan y muestren datos dinámicamente. Mantente curioso y sigue explorando el vasto horizonte del desarrollo web. ¡El conocimiento es poder!

Felipe Nazal

student•

Compañeros, si están usando la versión 3 de Vue deben descargar este paquete de 'vue-router': $ npm i vue-router@next > Ya que si instalan ‘$ npm i vue-router’ no les va a funcionar en esta versión de Vue <
Ahora bien, si ya lo instalaron, no se preocupen, remuévanlo con este comando: $ npm remove vue-router E instalen el que les comento más arriba.
> Ya luego de haber instalado 'vue-router' para la versión 3 de Vue deben de hacer algunos cambios en el código para que puedan tener los mismos resultados que se muestran en esta clase. Partamos viendo primero como queda el archivo - main.js -

> Si se fijan, es aquí donde estamos usando nuestra función '.use()' y es de esta forma cómo le decimos a Vue que utilice el 'router' que importamos en la línea 6.
Ahora que ya tenemos este archivo listo, debemos modificar nuestro archivo - router.js -

> Aquí estamos haciendo uso de 2 métodos de 'vue-router':

'createWebHistory': Lo usamos para el historial de navegación
'createRouter': Lo usamos para crear nuestra instancia de router, y es dentro de este donde construimos nuestro Array de rutas, siendo cada ruta representada a través de un objeto.

Ahora bien, además del uso de esos métodos, hay un par de cosas más que se hacen diferente. Estas son:

Ya no hacemos uso de la función 'use()' ya que esta la estamos usando directamente en la instancia de nuestra aplicación de Vue en 'main.js', y por lo mismo ya no necesitamos escribir tampoco 'import Vue from 'vue'
Y el otro cambio es que ahora para que podamos dirigir todas las rutas que no existen a un componente destinado para eso, que en nuestro caso es el componente 'Error.vue', debemos definir el 'path’ de esa ruta de esta forma:

path: "/:catchAll(.*)",

ya que si lo hacen así:

path: "*",

No les va a funcionar.
------------------------------- > Los componentes que se crearon en la clase que están dentro del directorio 'views' son iguales, por eso no es necesario ponerlos en este comentario < -------------------------------
Y bueno, ya con estas modificaciones no deberían tener problemas al correr su aplicación 😄. Espero les sirva, Saludos!

Jonathan Ulises Cañada Aguilar

student•

Excelente, funciono perfecto

Muchas gracias.

Alejandro Valenzuela

student•

Gracias!!estuve 2hs y al final solo era ejecutar :

npm i vue-router@next

Saludos

David Alejandro Abreu Abreu

student•

Se puede apreciar que al escribir manualmente la dirección en la barra, la pagina se recarga, sin embargo, al hacer clic al enlace generado por el router-link, la pagina no recarga. Esa en la idea de usar router-view y router-link

Edgar Ramón González Contreras

student•

Ajax en todo su esplendor

Miguel José Balderas Díaz

student•

el video esta mal editado, en que momento se crearon los archivos Error.vue y About.vue?

Juan Reyes

student•

Me parece que ya está corregido.

Federico Walovnik

student•

Sigue estando el mismo error de edicion

José Ernesto Silva Herrera

company_admin•

Para los que están trabajando con Vue.js 2. El codigo para instalar la version del vue-router compatible.

npm i vue-router@3.5.3

fidel angel ochoa

student•

gracias lo pude instalar

David Gonzalo Gomez Orjuela

student•

uy gracias, me sirvio bastante despues de no encontrar una solucion viable

Carlos Eduardo Gomez García

teacher•

La forma de usar Vue Router cambió un poquito mucho en VueJS 3

Les recomiendo usar el comando:

vue add router

Y se ahorran todo el trabajo, aunque les quedará una estructura diferente y a esta altura del proyecto les sobreescribirá muchas cosas, así que para simplificarlo mas, el archivo router.js quedaría así:

import { createRouter, createWebHistory } from "vue-router";

import Home from "@/views/Home.vue";

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes: [
    {
      path: "/",
      name: "Home",
      component: Home
    }
  ]

});

export default router;

Y el archivo main.js así:

import { createApp } from "vue";
import App from "./App.vue";

//El @ representa al directorio src
import "@/assets/css/tailwind.css";

import router from "@/router.js";

createApp(App)
  .use(router)
  .mount("#app");

Jhonathan Alfonso

student•

Como cuando crees que el Profesor es un robot por como lee el guion jajaj

Ricardo Celis

teacher•

Añadir documentación de Vue Router: https://router.vuejs.org/

Michael Garcia

student•

Holaa, tengo una duda, lo que pasa es que para instalar Vue Router lo hice desde la UI, entonces me reemplazo y me creó unos archivos, y veo que me da esta ruta así, pero no entiendo el porque y para que sirve, ya que no veo que cambie en algo en el navegador. Solo es una duda :)

Nacho Anaya

teacher•

Hola, es una buena pregunta. No vas a notar ningun cambio a simple vista, pero lo que hace ese tipo de llamada a los componentes es aplicar un patron de lazy load. Permite que webpack divida el contenido de esos componentes en otros archivos secundarios con la propiedad webpackChunkName y esto hace que el navegador solo cargue ese archivo cuando se accede a esa ruta especfiica.

Basicamente te ahorras cargar cosas que no se utilizan o no se han utilizado aun y logras que la carga inicial de la aplicacion sea mucho mas veloz.

Michael Garcia

student•

Ohhh ya veo si eso tiene sentido, pero entonces, podemos decir que de esa forma es mejor llamar el componente si requieres velocidad? o en que casos lo podemos usar. Gracias profe

Seba Cardoso

student•

Con vue 3 el main.js se ve diferente, asi:

import { createApp } from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";

import "@/router";

createApp(App).mount("#app");```

¿Cómo puedo hacer para pasarle el router?

Kevin Parra Lopez

student•

Crack, si pudiste con esa parte?

Mauro Nava

student•

En la version de Vue3, ya no es necesario implementar los plugins por lineas separadas como antes, con Vue.use(pluginchido), en Vue3 se agregan directamente en createApp

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')```

Desirée Marrón

student•

Hola, ¿para qué se usa exactamente el 'mode: 'history'? Veo que normalmente recomiendan quitarlo porque hace conflicto de algún modo al realizar la build con npm del proyecto. ¿Es necesario ponerlo?

Jorge Baumann

teacher•

Ahi te lo explica bien 👌: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Nacho Anaya

teacher•

No deberias tener conficto con node, en todo caso podes llegar a tener conflictos de redireccionamiento al momento de deployar la app. Pero esto depende basicamente del web server que estes utlizando. Con node, no he tenido problemas.

El history mode permite utilizar la API de history para navegacion que tienen los browsers y esto te permite brindar al usuario una navegacion mas "nativa" e intuitiva y que no noten que estas en una SPA.

Entre otras cosas te da control total sobre el historial del browser, permite que naveguen usando los botones de back y forward y ademas te quedan URL naturales sin necesidad de usar el hash para serparar rutas.

Jose Morales Varon

student•

Si tienen inconvenientes les recomiendo bastante leer los comentarios, siempre hay personas que se toman el tiempo necesario para tratar de aclarar los errores que se pueden llegar a presentar al momento de ir codeando o trabajando con la consola 👍

Bairon Felipe peña castellanos

student•

Vue 3, sintaxis del error

{ 
        path: "/:catchAll(.*)",
        name: "error",
        component: Error
     }
<code>

Espero les sirva

John Ruiz

student•

Hola, gracias por el aporte, ya que con el curso y la V3 de vue toca mirarlo todo y este aporte de vos me ayudo a seguir. 👨🏼‍💻

jonathan sanchez

student•

Instalar Vue Router con npm es muy sencillo, simplemente ejecutamos el siguiente comando:

npm i -S vue-router

José de Jesús Uscanga Molina

student•

Si que lo es, incluso ya no es necesario poner el -S que significaba -save donde además de instalar la dependencia la incluía en el packaje.json.

Ahora solo basta con colocar npm i vue-router y npm ya lo agrega como dependencia al packaje.json

Javier Peña Fuentes

student•

Gracias!!!

Jefferson Andres Espejo Goez

student•

El Router de Vue me ha parecido muy diferente al de React :/ . Pero bueno, es algo lógico ya que cada uno tiene sus pro y sus contras. Como recomendación para muchos, trabajen este curso en Vue 2 y cuando lo terminen pásenlo a Vue 3 . Este curso es su primer acercamiento al framework, y más de uno se puede sentir muy frustrado por los errores debido a los cambios de una versión a otra. Por otra parte, les recomiendo utilizar yarn como su gestos de paquetes y dependencias, es más fluido que npm. #NuncasParesDeAprender

yarn add vue-router ```

Abner Batz

student•

Vue.use('xxx') permite instalar o incorporar plugins o utilidades que tenga la librería.

<router-view /> componente que permite establecer cual es el código de html que se reemplazará a medida que se vaya cambiando la ruta.

v-router ofrece un componente llamado
<router-link> que sirve para direccionar de una pagina a otra, necesita la propiedad to para dirigir

Emanuel Valero

student•

Yo tengo una pregunta sobre el enrutamiento. Cómo se hace para que al hacer render de una ruta, el contenido se muestre desde el principio de la página (entiéndase en window scroll to 0 ) y no desde la posición en scroll donde se encontraba inicialmente?

Laura duque

student•

Tal vez usando SSR con nuxt

Manuel Ojeda

student•

No hace falta añadir código extra, así como lo mencionas con usar windowScrollTo(0, 0) debería bastar

Julio César Rodríguez

student•

Me di cuenta de qué el tamaño del body generado no ocupa todo el alto de la pantalla. Cómo puedo hacer para que sea del 100%?

Juan Guillen Fortich

student•

dale un height de 100vh

HERMES DE JESUS CASTELLANO MATA

student•

Si les salen errores al momento de hacer npm run serve puede deberse a la diferencia en la version del router. Recordemos que este curso se hizo con vue js 2 y ya estamos en la 3. Al instalar vue-router como lo hizo en el video, se esta instalando la versión mas actual.

Para usar la misma versión que Nacho solo deben correr:

npm npm remove vue-router

y luego

 npm i vue-router@3.5.3

Bairon Felipe peña castellanos

student•

Para los que tengan problema con el router, ya que estan trabajando con Vue 3. Esta es la solucion.

Router.js

import { createWebHistory, createRouter} from 'vue-router'
import Home from '@/views/Home.vue'


const routes= [
    { 
        path: '/',
        name: "Home",
        component: Home
     },
 ];

const router = createRouter({
      history: createWebHistory(),
      routes,
    
})

export default router;
<code>

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---
import './assets/css/tailwind.css'

createApp(App).use(router).mount('#app')

<code>

Espero les sirva.

Antoni Cardenas Contreras

student•

Muchas gracias, me sirvió mucho tu código

Wilmar David Macias Guerrero

student•

Muchas gracias el aporte me ayudo mucho

Juan David Diaz

student•

Si estas usando Vue 3, necesitas otro codigo para el Router.

Primero desinstala el router de Vue 2 y limpia cache:

npm uninstall vue-router --save
npm cache clean --force

Ahora instala el router de Vue 3:

npm i vue-router@next

Archivo main.js hasta este video:

import { createApp } from "vue";
import App from "./App.vue";
import "@/assets/css/tailwind.css";

import router from "@/router.js";

createApp(App)
  .use(router)
  .mount("#app");

Archivo router.js hasta este video:

import { createWebHistory, createRouter } from "vue-router";

import Home from "@/views/Home";

const routerHistory = createWebHistory();

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
  ],
});

export default router;

Lee el codigo y entenderas los cambios desde Vue 2 a Vue 3 ;D