获取当前页面的 url 参数

一、使用 URLSearchParams（现代浏览器支持）

URLSearchParams 是 JavaScript 提供的一个内置对象，用于处理 URL 的查询字符串，它提供了一系列方便的方法来获取、设置和删除查询参数。

// 获取当前页面的 URL 参数
const queryString = window.location.search;
// 创建 URLSearchParams 对象
const urlParams = new URLSearchParams(queryString);
// 获取特定参数的值
const paramValue = urlParams.get("paramName");
console.log(paramValue);
// 遍历所有参数
urlParams.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

二、手动解析查询字符串

手动解析查询字符串是一种兼容性较好的方法，通过字符串的分割和处理来获取参数。

function getUrlParams() {
  const queryString = window.location.search.slice(1); // 去除问号
  const params = {};
  if (queryString) {
    const paramPairs = queryString.split("&");
    paramPairs.forEach((pair) => {
      const [key, value] = pair.split("=");
      if (key) {
        params[key] = decodeURIComponent(value || "");
      }
    });
  }
  return params;
}
// 使用示例
const allParams = getUrlParams();
const specificParam = allParams["paramName"];
console.log(specificParam);

三、在单页面应用（SPA）中使用路由库获取参数

在基于 Vue.js、React.js 等框架构建的单页面应用中，通常会使用路由库来管理页面导航，这些路由库也提供了方便的方法来获取 URL 参数。

1. Vue.js 示例（使用 Vue Router）

<template>
  <div>
    <p>参数值: {{ $route.query.paramName }}</p>
  </div>
</template>
<script>
export default {
  mounted() {
    const paramValue = this.$route.query.paramName;
    console.log(paramValue);
  },
};
</script>

2. React.js 示例（使用 React Router）

import { useSearchParams } from "react-router-dom";
function MyComponent() {
  const [searchParams] = useSearchParams();
  const paramValue = searchParams.get("paramName");
  return (
    <div>
      <p>参数值: {paramValue}</p>
    </div>
  );
}
export default MyComponent;