获取当前页面的 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;