如何获取URL中的路径变量而不是没有JavaScript的表单提交get请求中的查询参数？

https://example.com/products/123

import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product Detail</h1>
      <p>Product ID: {productId}</p>
    </div>
  );
}

<template>
  <div>
    <h1>Product Detail</h1>
    <p>Product ID: {{ productId }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    productId() {
      return this.$route.params.productId;
    }
  }
}
</script>

https://example.com/search?q=javascript&page=2

const params = new URLSearchParams(window.location.search);
const query = params.get('q'); // 'javascript'
const page = params.get('page'); // '2'