Cómo Instalar Vue Router

He vuelto al punto de inicio deshaciéndome de nuestro router atersanal de la última lección.
El proyecto del curso está creado con Vue CLI, que es el estándar de facto para crear proyectos basados en Vue. Si no sabes cómo funciona en Escuela Vue dispones de varias lecciones sobre él a través del curso de Vue Intermedio.
Cuando creamos un proyecto con Vue CLI es posible seleccionar Vue Router como dependencia de base. En nuestro caso lo vamos ahora.
Podemos lanzar un interfaz gráfico para controlar aspectos de la aplicación con vue ui. La verdad es que es una pasada.
Vue Router es tan común que te aparecerá listo para agregarse al proyecto arriba, junto que Vuex, que utilizaremos más adelante. Si no te apareciese, puedes buscarlo haciendo click en Agregar Complementos.
Nosotros lo vamos a agregar a través de la línea de comando con vue add router.
Tras instalarse, Vue Router habrá agregado algunos nuevos archivos y modificado otros. Los componentes About.vue y Home.vue no los necesitamos. Lo más importante se encuentra en main.js y router/index.js.
Si intentamos hacer funcionar el proyecto con npm run serve nos encontramos con errores. Sólo tenemos que corregir las rutas en router/indes.js y los componentes correctos para hacer que todo funcione bien.
De paso, fíjate en los Magic Comments de Webpack para hacer code splitting con las rutas de tu aplicación. Si no tienes claros estos conceptos en Escuela Vue tenemos un curso de Webpack donde te lo explico.
Más adelante en el curso de Vue Router te explicaré para que sirven la propiedad mode que en este momento activa el modo historia.
Lo importante es que ya tenemos Vue Router instalado y listo para utilizar en nuestro proyecto.

Cómo Instalar Vue Router

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?

Recibe novedades en tu 📬