向当前url追加参数/获取地址栏中的参数
一、使用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 }
snows_l: 哈哈,我当时也是找了好久,谈不上强迫症,但是不弄好真的不舒服
Absurdaaa: 一晚上了,只有你有用,谢谢哥
snows_l: 没太明白你的意思, 但是一般都是垂直居中的呀,可能需要样式调整一下你想要的
sunlyu-Sun: 我还遇到个问题,表格里,每一条的操作栏中的删除按钮,是垂直方向上的居中,所以和旁边的就偏靠下了
snows_l: 有用就好, 我也是项目中遇到了,然后才做一下笔记