一、使用history的replaceState方法向当前url追加参数
// 调用
var newurl = updateQueryStringParameter(window.location.href, 'key', 'value');
//向当前url添加参数,没有历史记录
window.history.replaceState({
path: newurl
}, '', newurl);
//方法
/**
* @param { String } uri 当前地址栏的url
* @param { String } key 添加的key值
* @param { String } value 添加的value值
* @return { String } 添加之后的url
*/
function updateQueryStringParameter(uri, key, value) {
if(!value) {
return uri;
}
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
二、获取地址栏中的参数
第一种方式:利用qs库
1、安装插件
import qs from 'qs'
2、调用方法
let queryParams = getParamsWithUrl(window.location.href)
3、方法
// 1、利用qs库 getParamsWithUrl(url) { return qs.parse(url.split('?')[1]) }
第二种方式:纯js
1、调用方法
let queryParams = getParamsWithUrl(window.location.href)
2、方法
// 2、手写的方法 /** * @param { String } url 要截取穿参的url * @return { Object } 返回获取地址栏中的参数对象 */ const getParamsWithUrl = (url) => { let params = {} // 是否是字符串 if (Object.prototype.toString.call(url).slice(8, -1) != 'String') { return params } // 是否存在参数字符串 let paramsStr = url.split('?')[1] if (!paramsStr) { return params } // 将参数字符串以&分割成数组 let paramsArr = paramsStr.split('&'); // 循环处理,又以=分割, item.split('=')[0]作为key, item.split('=')[1]作为value paramsArr.forEach(item => { if (item.split('=')[0] && item.split('=')[1]) params[item.split('=')[0]] = item.split('=')[1] }) return params }