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
yHome.vue
no los necesitamos. Lo más importante se encuentra enmain.js
yrouter/index.js
. - Si intentamos hacer funcionar el proyecto con
npm run serve
nos encontramos con errores. Sólo tenemos que corregir las rutas enrouter/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.
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?
Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.