Rutas dinámicas y parámetros en Vue Router

Las rutas dinámicas son rutas que pueden cambiar en función de ciertos parámetros o valores.

Esto nos permite mostrar contenido construir rutas que pueden adaptarse a diferentes contenidos o datos (como perfiles de usuario, detalles de productos)

Definición de parámetros en rutas

En Vue Router, los parámetros de ruta se definen utilizando el prefijo : seguido del nombre del parámetro. Por ejemplo:

{ path: '/producto/:productoId', component: ProductDetails }

Parámetros múltiples

También es posible definir rutas con múltiples parámetros. Por ejemplo:

{ path: '/category/:categoryId/product/:productId', component: ProductDetail }

Parámetros opcionales

A veces, es útil definir parámetros que no son obligatorios. Para ello, podemos utilizar el símbolo ? después del nombre del parámetro. Por ejemplo:

{ path: '/user/:userId?', component: UserProfile }

Rutas anidadas

Las rutas dinámicas también pueden combinarse con rutas anidadas para crear estructuras más complejas. Por ejemplo:

const routes = [
  {
    path: '/user/:userId',
    component: UserLayout,
    children: [
      { path: 'profile', component: UserProfile },
      { path: 'settings', component: UserSettings }
    ]
  }
];

En este caso, las rutas /user/1/profile y /user/1/settings estarán disponibles dentro del layout UserLayout.

Acceso a parámetros en componentes

Una vez que hemos definido una ruta dinámica, necesitamos acceder a los parámetros en nuestro componente para poder mostrar el contenido correspondiente.

Vue Router proporciona dos formas principales de acceder a los parámetros, en función de que estemos usando Composition API, o Options API.

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.userId;
    console.log(`User ID: ${userId}`);
    // Aquí podríamos hacer una llamada a una API para obtener los datos del usuario
  }
};

export default {
  name: 'UserProfile',
  created() {
    const userId = this.$route.params.userId;
    console.log(`User ID: ${userId}`);
    // Aquí podríamos hacer una llamada a una API para obtener los datos del usuario
  }
};

Reactividad de los parámetros

Los parámetros de ruta son reactivos. Es decir, significa que si el valor de un parámetro cambia (por ejemplo, al navegar de /user/1 a /user/2), el componente se actualizará automáticamente.

Si necesitas realizar una acción específica cuando cambia un parámetro, puedes usar un watch en el parámetro:

<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

watch(() => route.params.userId, newUserId => {
  console.log(`User ID changed to: ${newUserId}`);
  // Llamada a la API para obtener los nuevos datos del usuario
});
</script>

Validación de parámetros

En algunos casos, es útil validar los parámetros de ruta para asegurarnos de que cumplen ciertos criterios antes de renderizar el componente.

Por ejemplo, supongamos que queremos asegurarnos de que el parámetro userId sea un número:

const routes = [
  {
    path: '/user/:userId',
    component: UserProfile,
    props: (route) => ({
      userId: Number(route.params.userId) || 0
    })
  }
];

Ejemplos prácticos

const routes = [
  { path: '/profile/:username', component: UserProfile }
];

export default {
  setup() {
    const route = useRoute();
    const username = route.params.username;
    // Llamada a la API para obtener los datos del usuario
  }
};

const routes = [
  { path: '/product/:productId', component: ProductDetail }
];

export default {
  setup() {
    const route = useRoute();
    const productId = route.params.productId;
    // Llamada a la API para obtener los detalles del producto
  }
};