前端js如何实现从浏览器的hash path上获取参数

在前端JavaScript中，可以通过解析浏览器的URL中的hash部分来获取参数。Hash部分通常以 # 开头，后面跟着路径和查询参数。以下是一个示例代码，展示如何从URL的hash部分获取参数：

JavaScript
function getHashParams() {
// 获取当前URL的hash部分
const hash = window.location.hash;

// 去掉开头的 '#' 符号
const hashWithoutHash = hash.substring(1);// 将hash部分按 '&' 分割成多个键值对
const params = hashWithoutHash.split('&');// 创建一个对象来存储参数
const paramsObj = {};// 遍历每个键值对
params.forEach(param => {// 按 '=' 分割键和值const [key, value] = param.split('=');// 解码并存储到对象中if (key) {paramsObj[decodeURIComponent(key)] = decodeURIComponent(value || '');}
});return paramsObj;

}

// 使用示例
window.onload = function() {
const params = getHashParams();
console.log(params);
};

解释
获取当前URL的hash部分: 使用 window.location.hash 获取当前URL的hash部分。
去掉开头的 # 符号: 使用 substring(1) 去掉hash部分的开头的 # 符号。
将hash部分按 & 分割成多个键值对: 使用 split('&') 将hash部分按 & 分割成多个键值对。
创建一个对象来存储参数: 初始化一个空对象 paramsObj 来存储参数。
遍历每个键值对: 使用 forEach 遍历每个键值对。
按 = 分割键和值: 使用 split('=') 将键值对按 = 分割成键和值。
解码并存储到对象中: 使用 decodeURIComponent 解码键和值，并将它们存储到对象中。
返回参数对象: 最后返回包含所有参数的对象。
使用示例

在页面加载完成后，调用 getHashParams 函数，并在控制台中打印出参数对象。例如，如果URL是 http://example.com/#name=John&age=30，那么输出将是：

JavaScript

这样，你就可以轻松地从URL的hash部分获取参数了。

如何删除hash path上的指定参数，然后重新跳转呢

在前端JavaScript中，可以通过操作URL的hash部分来删除指定的参数，然后重新跳转。以下是一个示例代码，展示如何从URL的hash部分删除指定参数并重新跳转：

示例代码
JavaScript
function removeHashParam(param) {
// 获取当前URL的hash部分
const hash = window.location.hash;

// 去掉开头的 '#' 符号
const hashWithoutHash = hash.substring(1);// 将hash部分按 '&' 分割成多个键值对
const params = hashWithoutHash.split('&');// 创建一个新数组来存储过滤后的参数
const newParams = params.filter(p => {// 按 '=' 分割键和值const [key, value] = p.split('=');// 如果键不是要删除的参数，则保留该参数return key !== param;
});// 将新的参数数组重新拼接成字符串
const newHash = newParams.join('&');// 更新浏览器的URL，移除旧的hash部分并添加新的hash部分
if (newHash) {window.location.hash = `#${newHash}`;
} else {window.location.hash = '';
}

}

// 使用示例
window.onload = function() {
// 假设我们要删除名为 'age' 的参数
removeHashParam('age');
};

解释
获取当前URL的hash部分: 使用 window.location.hash 获取当前URL的hash部分。
去掉开头的 # 符号: 使用 substring(1) 去掉hash部分的开头的 # 符号。
将hash部分按 & 分割成多个键值对: 使用 split('&') 将hash部分按 & 分割成多个键值对。
创建一个新数组来存储过滤后的参数: 初始化一个空数组 newParams 来存储过滤后的参数。
遍历每个键值对: 使用 filter 方法遍历每个键值对。
按 = 分割键和值: 使用 split('=') 将键值对按 = 分割成键和值。
如果键不是要删除的参数，则保留该参数: 检查键是否等于要删除的参数，如果不是则保留该参数。
将新的参数数组重新拼接成字符串: 使用 join('&') 将新的参数数组重新拼接成字符串。
更新浏览器的URL: 使用 window.location.hash 更新浏览器的URL，移除旧的hash部分并添加新的hash部分。如果没有新的参数，则清空hash部分。
使用示例

在页面加载完成后，调用 removeHashParam 函数，并传入要删除的参数名称（例如 age）。这样，页面会重新加载，并且URL中的指定参数将被删除。