Vuejs: Navegación y enrutamiento
Vue 3.5: guía detallada sobre navegación y enrutamiento en aplicaciones. Aprende a gestionar rutas y componentes dinámicos eficazmente.
Aprende Vuejs GRATIS y certifícateVue 3.5 es una evolución significativa en el ecosistema de Vue.js, ofreciendo mejoras en rendimiento y una API más intuitiva. Uno de los aspectos fundamentales en la creación de aplicaciones web es la gestión de la navegación y el enrutamiento. En este módulo, exploramos cómo manejar estas tareas usando Vue Router, la solución oficial de enrutamiento para Vue.
Instalación de Vue Router
Para empezar, necesitas instalar Vue Router en tu proyecto Vue 3.5. Puedes hacerlo utilizando npm o yarn:
npm install vue-router@4
# o
yarn add vue-router@4
Configuración básica
Después de instalar Vue Router, lo siguiente es configurarlo. Crea un archivo router.js
en tu directorio src
:
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
En tu archivo principal main.js
, necesitas importar y usar el router:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
Definición de rutas dinámicas
Las rutas dinámicas permiten definir URLs que contienen variables. Esto es útil para páginas de detalles, como perfiles de usuario o artículos de blog. Aquí tienes un ejemplo de cómo definir una ruta dinámica:
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/user/:id', component: User }
];
En el componente User.vue
, puedes acceder al parámetro de la ruta usando this.$route.params
:
<template>
<div>
<h1>Usuario {{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
name: 'User'
};
</script>
Navegación programática
Vue Router permite la navegación programática, es decir, cambiar la ruta desde el código JavaScript. Esto se logra usando el método push
del router:
methods: {
goToUser(id) {
this.$router.push(`/user/${id}`);
}
}
Rutas anidadas
Las rutas anidadas permiten crear estructuras de navegación más complejas, como un tablero con diferentes secciones. Aquí tienes un ejemplo de cómo definir rutas anidadas:
const routes = [
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: 'profile',
component: Profile
},
{
path: 'settings',
component: Settings
}
]
}
];
En el componente Dashboard.vue
, usa <router-view>
para renderizar las rutas hijas:
<template>
<div>
<h1>Dashboard</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Dashboard'
};
</script>
Guardias de navegación
Las guardias de navegación son funciones que se ejecutan antes de cambiar de ruta. Son útiles para verificar permisos o realizar redirecciones. Aquí tienes un ejemplo de una guardia global:
router.beforeEach((to, from, next) => {
if (to.path === '/protected' && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
Estas son algunas de las funcionalidades básicas y avanzadas que ofrece Vue Router en Vue 3.5. Con una correcta gestión de la navegación y el enrutamiento, puedes crear aplicaciones web sofisticadas y fáciles de mantener.
Lecciones de este módulo de Vuejs
Lecciones de programación del módulo Navegación y enrutamiento del curso de Vuejs.
Ejercicios de programación en este módulo de Vuejs
Evalúa tus conocimientos en Navegación y enrutamiento con ejercicios de programación Navegación y enrutamiento de tipo Test, Puzzle, Código y Proyecto con VSCode.