• 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.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬