Rutas
Parámetros de Ruta
Los parámetros de ruta permiten leer valores dinámicos desde la URL para adaptar el contenido mostrado por una vista o componente.
Ejemplo
Leer un identificador desde la URL y mostrarlo en pantalla.
Vueroute.params
<script setup lang="ts">
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<template>
<p>Product ID: {{ route.params.id }}</p>
</template>
Usa vue-router para leer los parámetros dinámicos desde route.params en la ruta actual.
ReactuseParams
import { useParams } from 'react-router'
function ProductPage() {
const { id } = useParams()
return <p>Product ID: {id}</p>
}
Usa react-router para obtener los parámetros de la ruta actual con useParams.
AngularActivatedRoute
import { Component, inject } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-product-page',
standalone: true,
template: `
<p>Product ID: {{ productId }}</p>
`,
})
export class ProductPageComponent {
private route = inject(ActivatedRoute)
productId = this.route.snapshot.paramMap.get('id')
}
Usa ActivatedRoute para leer los parámetros de la ruta activa desde el componente.
