En el curso básico llegamos hasta Vue Router, en Vue 3 la configuración es un poco diferente
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
VueRouter es una herramienta esencial al trabajar con Vue.js, ya que permite crear aplicaciones de una sola página (Single Page Applications, SPA) con una experiencia de usuario más fluida y rápida. En vez de recargar toda la página al cambiar de URL, VueRouter actualiza solo la parte necesaria del contenido, mejorando el tiempo de carga y la experiencia del usuario. Esta funcionalidad es vital para aplicaciones modernas donde la interactividad y la velocidad son cruciales.
Vue.js es un framework progresivo que permite ampliar su funcionalidad según lo requiera el proyecto. Inicialmente, se utiliza el core que incluye el rendering declarativo y el sistema de componentes; luego, se pueden añadir herramientas de desarrollo como Webpack, Slimt y Babel para mejorar el flujo de trabajo.
La instalación de VueRouter añade una nueva capa a la aplicación: el rooteo del lado del cliente. Esto permite diseñar aplicaciones que no recargan íntegramente la página al navegar, sino que simplemente actualizan una sección específica, optimizando los tiempos de carga.
// Ejemplo básico de cómo empezar a configurar VueRouter
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = new VueRouter({
routes, // short for `routes: routes`
});
new Vue({
router,
render: h => h(App),
}).$mount('#app');
Rutas Anidadas: Permite definir rutas dentro de otras rutas, ayudando a organizar la aplicación en módulos o componentes.
Rutas dinámicas: Gestiona parámetros en las rutas para valores dinámicos.
Transiciones de CSS: Facilita transiciones animadas entre páginas al cambiar de ruta, mejorando la estética de la aplicación.
HTML5 History Mode: Utiliza el modo historial para navegar en el historial del navegador sin recargar la página.
VueRouter no solo mejora la experiencia del usuario, sino que también incrementa la satisfacción de los desarrolladores con su facilidad de uso y modularidad. Proporciona una estructura clara y mantenible, lo cual es esencial para proyectos escalables. Además, permite a los desarrolladores centrarse en la lógica de la aplicación y en ofrecer una experiencia de usuario dinámica.
VueRouter es una herramienta poderosa que, al integrarse con Vue.js, permite crear aplicaciones modernas, eficientes y agradables de usar. Su modularidad y flexibilidad hacen que sea indispensable para desarrollar aplicaciones front-end complejas y mantenibles. Por ende, dominar VueRouter es fundamental para cualquier desarrollador interesado en el desarrollo de aplicaciones con Vue.js. ¡Sigue aprendiendo y explorando las maravillas de Vue y VueRouter!
Aportes 6
Preguntas 1
En el curso básico llegamos hasta Vue Router, en Vue 3 la configuración es un poco diferente
Cada vez mas interesante.
Vuye route es un plugin o inrutador que premite aplicar SPA (single page application) con el objetivo de renderizar y mejor el rendimiento de la aplicacion tambien permite realizar rutas annidadas, es modular es decir permite que cada componente tanga s propia ruta tambien permite que la ruta utilize parametro como tambien brindar seguridad segun los roles que correspondan, y por ultimo permite agregarle efectos visuales de transicion
Vue Router es el enrutador oficial de Vue.js
Se integra profundamente con el núcleo de Vue.js para facilitar la creación de aplicaciones de una sola página con Vue.js (SPA). Las características incluyen:
vue router es una de las cosas muy interesantes de vue
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?