Ahora que ya sabemos cómo crear stubs y mocks con vue-test-utils, vamos a montar un router real en nuestra aplicación. Crearemos una prueba que compruebe, a través de un stub, que router-link apunte hacia la ruta correcta. Además escribiremos otra prueba que compruebe, en el componente de destino de la ruta, que se esté haciendo un uso adecuado de...
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección vamos a trabajar en la acción para editar registros pero esta vez utilizando vue-router y en formato de SPA. Para ello haremos que el formulario de edición de tareas sea una página aparte (con una URL) y agregaremos el enlace desde el detalle del registro a la página de edición y por...
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección vamos a seguir practicando lo aprendido hasta el momento mientras reconstruimos el módulo de tareas como una SPA (Single Page Application) usando vue-router y repasamos otros conceptos como las clases de CSS dinámicas y los componentes globales de Vue.js....
Regístrate para ver ésta y cientos de lecciones exclusivas.
Hasta el momento en todas nuestras URLs tenemos un simbolo de numeral (#) y esto es debido a que el modo por defecto de vue-router es hash mode o modo hash. Este hash es utilizado para simular una URL y de esta forma evitar que la página sea recargada cuando la URL cambia. Esto no quiere...
Regístrate para ver ésta y cientos de lecciones exclusivas.
Algunas veces necesitamos alterar las URL de nuestras rutas, pero al no tener una forma de identificarlas se pueden presentar inconvenientes al momento de cambiarlas. vue-router nos permite identificar nuestras rutas mediante un nombre. Esto nos da la posibilidad de cambiar la URL de una ruta (por ejemplo de /tasks a /tareas o /mis-tareas) sin afectar...
Regístrate para ver ésta y cientos de lecciones exclusivas.
La mayoría de las aplicaciones están compuestas por múltiples componentes anidados unos dentro de otros y estos componentes suelen compartir los mismos segmentos de una URL (/tasks y /tasks/1, por ejemplo). vue-router nos da la posibilidad de crear rutas anidadas o sub-rutas para cubrir esta necesidad de una forma muy simple y de esta forma poder organizar...
Regístrate para ver ésta y cientos de lecciones exclusivas.
Cuando creamos un Single Page Application (SPA) con un framework de JavaScript como Vue.js, debemos manejar escenarios donde el usuario intente acceder a una URL que no existe o ha sido eliminada, al igual que cuando trabajamos con frameworks de backend como Laravel. En esta lección aprenderemos cómo podemos manejar errores de tipo 404 en...
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección aprenderemos cómo podemos extraer el estado (datos) de nuestra aplicación a un objeto centralizado al cual todos los otros componentes tendrán acceso. De esta forma entonces podremos obtener la tarea desde el componente de Detalles (o de cualquier otro componente) y sincronizar las tareas a lo largo de todos nuestros componentes sin...
Regístrate para ver ésta y cientos de lecciones exclusivas.
En esta lección vamos a asumir que necesitamos agregar más campos a la tarea (por ejemplo una descripción detallada) y por lo tanto necesitamos crear nuevas rutas para mostrar el detalle de la tarea y poder editarla. Estas nuevas rutas serán dinámicas (puesto que cada tarea tiene un identificador -o ID- diferente). Además en esta...
Regístrate para ver ésta y cientos de lecciones exclusivas.
En la lección anterior sobre Vue Router, aprendimos cómo utilizar este paquete para crear los enlaces de nuestra Single Page Application (SPA), sin embargo a estos enlaces aún les hace falta un poco de estilo. Es por esto que en esta nueva lección vamos a agregarle los estilos de Bootstrap en nuestro caso, pero te...
Regístrate para ver ésta y cientos de lecciones exclusivas.