Crea una SPA con vue-router

Crear una aplicación de una sola página o SPA (por sus siglas en inglés “Single Page Application”) es muy sencillo con Vue.js.

Esto es debido a que con Vue.js nosotros podemos “componer” nuestra aplicación de pequeños componentes independientes como hemos aprendido hasta ahora y también contamos con un paquete llamado vue-router que nos permite atar o enlazar una o más URLs a uno o más componentes específicos, indicarle a Vue dónde queremos mostrar las secciones y por supuesto también nos ayuda a generar los enlaces de las diferentes secciones.

Es por ello que a partir de ahora crearemos componentes con la intención de que estos representen secciones o sub-secciones dentro de nuestra aplicación y vamos a instalar y a utilizar vue-router para enlazar estos componentes a diferentes URLs. Vamos a comenzar con un ejemplo sencillo en el siguiente video:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

Instalación de Vue Router

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

Luego es necesario incluirlo de la siguiente forma (esto lo haremos en nuestro archivo main.js):

Una vez hecho esto, ya podemos crear un nuevo objeto Vue Router y registrar nuestro listado de rutas:

Debemos incluir el objeto router dentro del objeto VM.

Esto lo hacemos utilizando la sintaxis de ES6, que es equivalente a router: router.

Las rutas se especifican en un array y cada ruta será un objeto con al menos las siguientes propiedades:

  • path: indica a donde apunta la ruta, como por ejemplo /about-us
  • component: indica el componente asociado a la ruta, representado por un objeto, como por ejemplo AboutUsPage.

Nota que en este ejemplo estoy colocando el hipotético componente en un subdirectorio llamado pages puesto que como te comenté en la lección anterior, no hay una única forma de ordenar tus componentes sino que depende de tu aplicación.

Finalmente para poder visualizar el componente debes agregar la siguiente etiqueta a tu vista principal:

Por otro lado escribir un menú básico es muy sencillo:

En la siguiente lección veremos cómo personalizarlo.

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Organización de los componentes en Vue.js 2 Lección siguiente Personalizar el estilo del menú de Vue Router