向当前url追加参数/获取地址栏中的参数

__冬七

已于 2024-04-26 15:33:01 修改

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2022-10-11 15:37:32 首次发布

本文链接：https://blog.youkuaiyun.com/snows_l/article/details/127264629

js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用JavaScript操作URL参数，包括向当前URL追加参数而不会产生新的浏览器历史记录，以及如何解析URL中的查询参数。

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

一、使用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
}