Route Parameters

Vueroute.params

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
  <p>Product ID: {{ route.params.id }}</p>
</template>

It uses vue-router to read dynamic parameters from route.params on the current route.

Vue docs

ReactuseParams

import { useParams } from 'react-router'

function ProductPage() {
  const { id } = useParams()

  return <p>Product ID: {id}</p>
}

It uses react-router to read the current route parameters with useParams.

React docs

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')
}

It uses ActivatedRoute to read the active route parameters from the component.

Angular docs