1、先了解 window.location 的各个属性:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2eabb391d2af830e646f980811ef24a7.png)
属性名 | 描述 |
---|
href | 完成的url |
host | 主机名和当前url的端口号 |
hash | 从#号开始的url(锚) |
hostname | 当前url的主机名 |
port | 当前url的端口号 |
pathname | 当前url的路径部分 |
protocol | 当前url的协议 |
search | 从?开始的url(查询部分) |
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d71a76dc4d38a201f323ebaef7aa4c27.png) | |
2、使用 window.location.href 获取参数对象集合
// 第一种方法
const parseUrlParams = (url) => {
const params = {}
if (!url || url === '' || typeof url !== 'string') {
return params
}
const paramsStr = url.split('?')[1]
if (!paramsStr) {
return params
}
const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
for (let i = 0; i < paramsArr.length / 2; i++) {
const value = paramsArr[i * 2 + 1]
params[paramsArr[i * 2]] =
value === 'true' ? true : value === 'false' ? false : value
}
return params
};
let param = parseUrlParams(window.location.href).token // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
// 第二种方法 (获取url某个参数的值)
const getValueByUrlParams = (paras) => {
let url = window.location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = {}
var i, j
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var returnValue = paraObj[paras.toLowerCase()];
if (typeof(returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
};
let param = getValueByUrlParams("token") // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(param) // fdsafadsfas
3、通过window.location.search 获取参数集合(注意一个参数以及多个参数)
const getRequest = (url) => {
// var url = window.location.search; //获取url中"?"符后的字串
let theRequest = new Object();
// 判断是否有问号
if (url.indexOf("?") != -1) {
// 把问号去掉
var str = url.substr(1);
// 判断是否有多个参数
if(str.indexOf("&") != -1) {
// 以&符分项组成数组
let strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
// 循环数组
// theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
// 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
} else {
// 只有一个参数
let arr = str.split("=");
theRequest[arr[0]] = arr[1];
}
};
return theRequest;
};
let obj = getRequest(window.location.search); // window.location.href = http://localhost:3000/#/home?
token=fdsafadsfas
console.log(obj) // {token: "fdsafadsfas"}
控制情绪,保持平静!