RosettaJS: Comparativas de Vue, React y Angular

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.