Creación de Aplicaciones SPA con Vue Router

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:37

Creación de Aplicaciones SPA con Vue Router

Curso Básico de Vue.js 2

Clase 29 de 38

Clase 29 / 38

Recursos

¿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

Hace 6 años

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

Hace 6 años

Excelente, funciono perfecto

Muchas gracias.

Alejandro Valenzuela

Hace 6 años

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

npm i vue-router@next

Saludos

Comentarios (87)87 comentarios

David Alejandro Abreu Abreu

Hace 7 años

Edgar Ramón González Contreras

Hace 5 años

Miguel José Balderas Díaz

Juan Reyes

Federico Walovnik

José Ernesto Silva Herrera

Company_admin

fidel angel ochoa

David Gonzalo Gomez Orjuela

Hace 4 años

Carlos Eduardo Gomez García

Jhonathan Alfonso

Ricardo Celis

Profesor

Michael Garcia

Nacho Anaya

Seba Cardoso

Kevin Parra Lopez

Mauro Nava

Desirée Marrón

Jorge Baumann

Jose Morales Varon

Bairon Felipe peña castellanos

John Ruiz

jonathan sanchez

José de Jesús Uscanga Molina

Javier Peña Fuentes

Jefferson Andres Espejo Goez

Abner Batz

Emanuel Valero

Laura duque

Manuel Ojeda

Julio César Rodríguez

Juan Guillen Fortich

HERMES DE JESUS CASTELLANO MATA

Antoni Cardenas Contreras

Wilmar David Macias Guerrero

Juan David Diaz

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Creación de Aplicaciones SPA con Vue Router