Introducción
En aplicaciones web, a menudo necesitamos manejar rutas que contienen parámetros variables. Por ejemplo, en una aplicación de blog, podríamos tener una ruta para mostrar un artículo específico basado en su ID. Vue Router facilita la creación de estas rutas dinámicas, permitiendo que nuestras aplicaciones sean más flexibles y dinámicas.
Conceptos Clave
- Rutas Dinámicas: Rutas que contienen parámetros variables.
- Parámetros de Ruta: Valores dinámicos que se pasan a través de la URL.
- Acceso a Parámetros de Ruta: Cómo acceder a estos parámetros dentro de los componentes.
Configuración de Rutas Dinámicas
Para configurar una ruta dinámica, utilizamos los dos puntos (:) seguido del nombre del parámetro en la definición de la ruta. Aquí hay un ejemplo básico:
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import UserProfile from '@/components/UserProfile.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/user/:id',
name: 'UserProfile',
component: UserProfile
}
]
});En este ejemplo, :id es un parámetro de ruta dinámico. Cualquier valor que siga /user/ en la URL se capturará como el parámetro id.
Acceso a Parámetros de Ruta
Dentro del componente UserProfile, podemos acceder al parámetro id utilizando this.$route.params.id. Aquí hay un ejemplo de cómo podríamos usarlo:
// components/UserProfile.vue
<template>
<div>
<h1>Perfil del Usuario</h1>
<p>ID del Usuario: {{ userId }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userId: this.$route.params.id
};
},
watch: {
'$route.params.id'(newId) {
this.userId = newId;
}
}
};
</script>En este ejemplo, userId se inicializa con el valor del parámetro de ruta id. Además, utilizamos un observador (watcher) para actualizar userId si el parámetro de ruta cambia.
Ejemplo Práctico
Vamos a crear una aplicación simple que muestra perfiles de usuario basados en un ID dinámico.
Paso 1: Configuración del Proyecto
Asegúrate de tener un proyecto Vue configurado con Vue Router. Si no lo tienes, puedes crear uno utilizando Vue CLI:
Paso 2: Definir la Ruta Dinámica
Edita router/index.js para incluir una ruta dinámica para los perfiles de usuario:
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import UserProfile from '@/components/UserProfile.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/user/:id',
name: 'UserProfile',
component: UserProfile
}
]
});Paso 3: Crear el Componente UserProfile
Crea un nuevo archivo UserProfile.vue en la carpeta components:
// components/UserProfile.vue
<template>
<div>
<h1>Perfil del Usuario</h1>
<p>ID del Usuario: {{ userId }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userId: this.$route.params.id
};
},
watch: {
'$route.params.id'(newId) {
this.userId = newId;
}
}
};
</script>Paso 4: Probar la Aplicación
Ejecuta tu aplicación:
Navega a http://localhost:8080/user/123 y deberías ver el ID del usuario mostrado en la página.
Ejercicio Práctico
Ejercicio 1: Añadir Más Parámetros de Ruta
- Modifica la ruta dinámica para incluir un segundo parámetro,
name. - Actualiza el componente
UserProfilepara mostrar tanto elidcomo elname.
Solución
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import UserProfile from '@/components/UserProfile.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/user/:id/:name',
name: 'UserProfile',
component: UserProfile
}
]
});// components/UserProfile.vue
<template>
<div>
<h1>Perfil del Usuario</h1>
<p>ID del Usuario: {{ userId }}</p>
<p>Nombre del Usuario: {{ userName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
userId: this.$route.params.id,
userName: this.$route.params.name
};
},
watch: {
'$route.params.id'(newId) {
this.userId = newId;
},
'$route.params.name'(newName) {
this.userName = newName;
}
}
};
</script>Navega a http://localhost:8080/user/123/John y deberías ver tanto el ID como el nombre del usuario mostrados en la página.
Conclusión
Las rutas dinámicas en Vue Router son una herramienta poderosa para crear aplicaciones web flexibles y dinámicas. Al comprender cómo definir y acceder a parámetros de ruta, puedes construir aplicaciones que respondan a una amplia variedad de necesidades de navegación. En el próximo módulo, exploraremos las rutas anidadas, que te permitirán crear estructuras de navegación más complejas y organizadas.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)