js 获取路由参数|极客笔记

js 获取路由参数

在前端开发中，经常会涉及到处理路由参数的情况，比如根据不同的参数展示不同的内容或执行不同的操作。在JavaScript中，我们可以通过一些方法来获取路由参数，以便于我们在程序中使用这些参数。本文将详细介绍在JavaScript中如何获取路由参数的方法，并给出相应的示例代码和运行结果。

1. 使用 window.location 对象

我们可以通过 window.location 对象中的 search 属性来获取路由参数。search 属性返回 URL 的查询部分（以问号 ? 开头），包括问号本身和问号后的参数。我们可以利用这一点，提取出URL中的路由参数。

// 获取 URL 中的参数字符串
let paramsString = window.location.search;

// 解析参数字符串，得到包含参数的对象
let searchParams = new URLSearchParams(paramsString);

// 获取特定参数的值
let paramValue = searchParams.get('paramName');

console.log(paramValue);

运行结果

假设当前页面的 URL 为 http://www.example.com/?param1=value1&param2=value2，运行上述代码将会输出 'value1'。这样我们就成功获取到了名为 param1 的路由参数的值。

2. 使用正则表达式匹配

另一种获取路由参数的方法是通过正则表达式来匹配URL中的参数部分。我们可以通过正则表达式提取出URL中的参数键值对，然后根据参数名来获取对应的数值。

// 匹配 URL 中的参数部分
let paramsRegex = /[?&]([^=&]+)=([^&]+)/g;

// 获取 URL 中的参数字符串
let paramsString = window.location.search;

// 存储参数的对象
let params = {};

// 提取参数键值对
let match;
while (match = paramsRegex.exec(paramsString)) {
    params[match[1]] = match[2];
}

console.log(params);

运行结果

假设当前页面的 URL 为 http://www.example.com/?param1=value1&param2=value2，运行上述代码将会输出 {param1: 'value1', param2: 'value2'}。这样我们就成功获取到了所有路由参数的键值对。

3. 使用 URLSearchParams 对象

除了可以使用 window.location 对象的 search 属性外，我们还可以直接使用 URLSearchParams 对象来处理路由参数。这样可以更方便地获取和操作URL中的查询参数。

// 实例化 URLSearchParams 对象
let searchParams = new URLSearchParams(window.location.search);

// 获取特定参数的值
let paramValue = searchParams.get('paramName');

console.log(paramValue);