window.location.search为空的解决办法

前端小芬芬

已于 2023-06-08 09:21:05 修改

阅读量3.6k

点赞数 1

文章标签： javascript

于 2023-06-07 18:37:08 首次发布

本文链接：https://blog.youkuaiyun.com/yf18040578780/article/details/131093795

版权

文章讲述了在JavaScript中，如何处理URL的查询参数。在遇到URL以#号开始时，window.location.search无法获取查询参数，需要通过window.location.hash来获取。文中提供了两种解决方案，一是去除#，二是利用split方法解析hash。此外，还展示了如何携带和接收带有参数的URL，使用URLSearchParams对象进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因:
例1： ‘http://a.com/data?id=1&time=2023-06-07’
此时通过 window.location.search 能够正常获取到url中的查询参数 ?id=1&time=2023-06-07

例2：‘http://a.com/#/data?id=1&time=2023-06-07’
此时通过 window.location.search 获取到的参数为空""，这是因为使用了hash导致，因为hash会将url中第一个#后的内容都作为hash内容，所以search为空了.

解决办法一:

把#去掉

解决方法二:

// 用 window.location.hash.split("?")[1];

 var search = window.location.hash.split("?")[1];
 console.log(search) //id=1&time=2023-06-07

参数如何携带跳转和接收

// 传入携带参数
let data = { study_id: row.study_id, hospital_id: localStorage.getItem('hospital_id'), pageType: 'edit' };
let url = 'http://localhost:5174/'
let params = new URLSearchParams();
for (let key in data) {
    params.append(key, data[key]);
}
window.open(url + '?' + params.toString(), '_self');

// 接收参数 hash 模式
let queryString = window.location.hash.split('?')[1]; // 获取问号后面的查询字符串
let params = new URLSearchParams(queryString); // 将查询字符串转换为 URLSearchParams 对象
let studyId = params.get('study_id'); // 获取 study_id 参数的值
let hospitalId = params.get('hospital_id'); // 获取 hospital_id 参数的值
let pageType = params.get('pageType'); // 获取 pageType 参数的值