url参数管理器

目的

动态管理url上的参数,可以给url增加参数或减少参数,也可以给某个参数增加或减少属性

举例

www.a.b.c.htm?attr=1_北京:上海,price_60-100:10-50&sort=collectionCount&sortMode=DESC

API

编号 方法 使用方法 参数 使用实例
1 放入url manager.putUrl();    
2 获取url manager.getUrl();    
3 获取url中的domain manager.getDomain();    
4 获取url中的param manager.getParamOld();    
5 获取url中的param(进行增加或减少之后) manager.getParam();    
6 参数进行拆分成map manager.getParamMapOld();    
7 参数进行拆分成map(进行增加或减少之后) manager.getParamMap();    
8 获取url中某个key的值 manager.getOld(k); k:参数 manager.getOld("sort");
9 获取url中某个key的值(进行增加或减少之后) manager.get(k); k:参数 manager.get("sort");
10 获取url中某个参数中某个的值 manager.getAttr(attr,k);

attr:参数

k:参数中的键值

manager.getAttr("attr","sort");
11 往url中加参数 manager.add(k,v);

k:参数

v:值

manager.add("attr","price_60-100:200-300");
12 往url中某个key中放参数 manager.addAttr(attr,k,v);

attr:参数

k:键

v:值

manager.addAttr("attr","price","60-100:200-300");
13 删url中的参数 manager.del(k); k:参数 manager.del("price");
14 删url中参数中某个属性 manager.delAttr(attr,k);

attr:参数

k:键

manager.delAttr("attr","price");

Jquery代码实例

/**
 * 参数管理器
 * 参数例子:www.a.b.c.htm?attr=1_北京:上海,price_60-100:10-50&sort=collectionCount&sortMode=DESC
 * @author 蔡龙
 * @version 2017-06-06
 */
(function(){
	/**
	 * manager命名空间,起隔离作用,防止同名变量冲突
	 */
	if(!window.manager) {window.manager={};};
	
	/**
	 * 往urlCache临时缓存放入url
	 * 调用示例:manager.putUrl();
	 */
	manager.putUrl = function(url){
		window.manager.urlCache = url;
	};
	
	/**
	 * 获取urlCache临时缓存的url
	 * 调用示例:manager.getUrl();
	 */
	manager.getUrl = function(){
		if(window.manager.urlCache){
			return window.manager.urlCache;
		}else{
			var url = window.location.href;
			window.manager.urlCache = url;
			return url;
		}
	};
	
	/**
	 * 获取url中的domain(从urlCache中的获取的url)
	 * 调用示例:manager.getDomain();
	 */
	manager.getDomain = function(){
		var url = manager.getUrl();
		var url_arr = url.split("?");
		var domain = url_arr[0];
		return domain;
	};
	
	/**
	 * 获取url中的param(从urlCache中的获取的url)
	 * 调用示例:manager.getParam();
	 */
	manager.getParam = function(){
		var url = manager.getUrl();
		var url_arr = url.split("?");
		var param = "";
		if(url_arr.length > 1){
			param = url_arr[1];
		}
		return decodeURIComponent(param);
	};
	
	/**
	 * 获取url中的param
	 * 调用示例:manager.getParamOld();
	 */
	manager.getParamOld = function(){
		var url = window.location.href;
		var url_arr = url.split("?");
		var param = "";
		if(url_arr.length > 1){
			param = url_arr[1];
		}
		return decodeURIComponent(param);
	};
	
	/**
	 * 参数进行拆分成map(从urlCache中的获取的url)
	 * 调用示例:manager.getParamMap();
	 */
	manager.getParamMap = function(){
		var param = manager.getParam();
		var map = {};
		if(param == ""){
			return map;
		}
		var params = param.split("&");
		for (var i = 0; i < params.length; i++) {
			var paramss = params[i].split("=");
			var key ="";
			var value ="";
			if(paramss.length > 1){
				key = paramss[0];
				value = paramss[1];
			}
			map[key] = value;
		}
		return map;
	};
	
	/**
	 * 参数进行拆分成map
	 * 调用示例:manager.getParamMapOld();
	 */
	manager.getParamMapOld = function(){
		var param = manager.getParamOld();
		var map = {};
		if(param == ""){
			return map;
		}
		var params = param.split("&");
		for (var i = 0; i < params.length; i++) {
			var paramss = params[i].split("=");
			var key ="";
			var value ="";
			if(paramss.length > 1){
				key = paramss[0];
				value = paramss[1];
			}
			map[key] = value;
		}
		return map;
	};
	
	/**
	 * 获取url中某个参数的值(从urlCache中的获取的url)
	 * 调用示例:manager.get("sort");
	 */
	manager.get = function(k){
		var value = "";
		var map = manager.getParamMap();
		if(k == null || k == ""){
			return value;
		}
		if(map[k]){
			return map[k];
		}else{
			return value;
		}
	};
	
	/**
	 * 获取url中某个参数的值
	 * 调用示例:manager.getOld("sort");
	 */
	manager.getOld = function(k){
		var value = "";
		var map = manager.getParamMapOld();
		if(k == null || k == ""){
			return value;
		}
		if(map[k]){
			return map[k];
		}else{
			return value;
		}
	};
	
	/**
	 * 获取url中某个参数中某个的值(从urlCache中的获取的url)
	 * 调用示例:manager.getAttr("attr","sort");
	 */
	manager.getAttr = function(attr,k){
		var value = "";
		var param = manager.get(attr);
		if(attr == null || attr == "" || k == null || k == "" ){
			return value;
		}
		if(param == null || param == ""){
			return value;
		}
		var params = param.split(",");
		for (var i = 0; i < params.length; i++) {
			var paramss = params[i].split("_");
			if(paramss.length > 1){
				if(k == paramss[0]){
					value = paramss[1];
					break;
				}
			}
		}
		return value;
	};
	
	/**
	 * 往url中加参数
	 * 调用示例:manager.add("attr","price_60-100:200-300");
	 */
	manager.add = function(k,v){
		manager.baseAdd(k,v);
//		manager.baseDel("pageNo");
//		manager.baseDel("pageSize");
	};
	
	/**
	 * 往url中某个key中放参数
	 * 调用示例:manager.addAttr("attr","price","60-100:200-300");
	 */
	manager.addAttr = function(attr,k,v){
		manager.baseAddAttr(attr,k,v);
	};
	
	/**
	 * 删url中的参数
	 * 调用示例:manager.del("price");
	 */
	manager.del = function(k){
		manager.baseDel(k);
	};
	
	/**
	 * 删url中参数中某个属性
	 * 调用示例:manager.delAttr("attr","price");
	 */
	manager.delAttr = function(attr,k){
		manager.baseDelAttr(attr,k);
	};
	
	/**
	 * 对url进行添加参数
	 * 调用示例:manager.baseAdd("price","60-100:200-300");
	 */
	manager.baseAdd = function(k,v){
		var domain = manager.getDomain();
		var param = manager.getParam();
		var map = manager.getParamMap();
		var pa = "";
		if(k == null || k ==""){
			return;
		}
		map[k] = v;//加入新参数,重名参数会被替换
		for(key in map){  
			var value = map[key];
			pa += "&" + key + "=" + value;
		}
		var url = domain + "?" + pa.substr(1);
		manager.putUrl(url);
	};
	
	/**
	 * 对url中的某个参数进行添加属性
	 * 调用示例:manager.baseAdd("attr","price","60-100:200-300");
	 */
	manager.baseAddAttr = function(attr,k,v){
		var domain = manager.getDomain();
		var param = manager.getParam();
		var map = manager.getParamMap();
		var pa = "";
		var value = "";
		var status = true;
		if(attr == null || attr=="" || k == null || k =="" || v == null || v == ""){
			return;
		}
		if(Object.keys(map).length == 0){
			pa += "&" + attr + "=" + k + "_" + v;
		}else{
			for(key in map){ 
				value = map[key];
				if(attr == key){
					var value = map[key];
					map[key]=value + "," + k + "_" + v;
					status = false;
					break;
				}
			}
			if(status){
				map[attr] = k + "_" + v ;
			}
		}
		for(key in map){  
			var value = map[key];
			pa += "&" + key + "=" + value;
		}
		var url = domain + "?" + pa.substr(1);
		manager.putUrl(url);
	};
	
	/**
	 * 对url进行减少参数
	 * 调用示例:manager.baseAdd("price");
	 */
	manager.baseDel = function(k){
		var domain = manager.getDomain();
		var param = manager.getParam();
		var map1 = manager.getParamMap();//旧参数
		var map2 = {};//新参数
		var delList = new Array();
		var pa = "";
		var url = "";
		if(k == null || k =="" || param == null || param == "" || Object.keys(map1).length == 0){
			return;
		}
		delList.push(k);
		for(key in map1){  
			var value = map1[key];
			for(var i = 0 ; i < delList.length ; i++){
				var delk = delList[i];
				if(delk != key){
					map2[key] = value;
				}
			}
		}
		for(key in map2){  
			var value = map2[key];
			pa += "&" + key + "=" + value;
		}
		if(pa==null || pa==""){
			url = domain;
		}else{
			url = domain + "?" + pa.substr(1);
		}
		manager.putUrl(url);
	};
	
	/**
	 * 对url的某个参数进行减少属性
	 * 调用示例:manager.baseAdd("attr","price");
	 */
	manager.baseDelAttr = function(attr,k){
		var domain = manager.getDomain();
		var param = manager.getParam();
		var map1 = manager.getParamMap();//参数
		var map2 = {};//某个参数属性的map
		var map3 = {};
		var pa = "";
		var pa1 = "";
		var val = manager.get(attr);
		if(attr == null || attr == "" || k == null || k == "" || param == null || param == "" || Object.keys(map1).length == 0){
			return domain;
		}
		if(val == null  || val == ""){
			return domain;
		}
		var vals = val.split(",");
		for (var i = 0; i < vals.length; i++) {
			var valss = vals[i].split("_");
			if(valss.length > 1){
				var key = valss[0];
				var value = valss[1];
				map2[key] = value;
			}
		}
		for(key in map2){
			if(k != key){
				map3[key] = map2[key];
			}
		}
		if(Object.keys(map3).length == 0){
			manager.del(attr);
		}else{
			for(key in map3){
				pa1 += "," + key + "_" + map3[key];
			}
			manager.add(attr,pa1.substr(1));
		}
		
	};
	
	
	//===============测试用例start=============
//	var a1 = manager.getDomain();
//	
//	var a2 = manager.getParam();
//	
//	var a3 = manager.getParamOld();
//	
//	var a4 = manager.getParamMap();
//	
//	var a5 = manager.getParamMapOld();
//	
//	var a6 = manager.get("sort");
//	
//	var a7 = manager.getOld("sort");
//	
//	manager.addAttr("attr","2","手机:电脑");
//	var a7_1 = manager.getUrl();
//	
//	manager.add("attr","price_60-100:200-300");
//	var a8 = manager.getUrl();
//	
//	var a9 = manager.getParam();
//	
//	var a10 = manager.getParamOld();
//	
//	var a11 = manager.getParamMap();
//	
//	var a12 = manager.getParamMapOld();
//	
//	var a13 = manager.get("attr");
//	
//	var a14 = manager.getOld("attr");
//	
//	manager.add("pageNo","1");
//	var a16 = manager.getUrl();
//	
//	var a17 = manager.getAttr("attr","price");
//	
//	manager.addAttr("attr","1","北京:上海");
//	var a18 = manager.getUrl();
//	
//	manager.addAttr("attr","商品所在地","Y-1670");
//	var a18_1 = manager.getUrl();
//	
//	manager.delAttr("attr","price");
//	var a19 = manager.getUrl();
	//==============测试用例end=================
	
})();

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中获取URL参数有多种方法。一种常用的方法是使用"vue-router"插件来获取URL参数。通过使用`this.$route.query`可以获取到URL中的查询参数。例如,如果URL为`https://example.com/?name=John&age=25`,我们可以使用`this.$route.query.name`来获取"name"参数的值,使用`this.$route.query.age`来获取"age"参数的值。这种方法适用于使用"vue-router"插件进行路由管理的情况。 另一种方法是通过JavaScript原生方式获取URL参数。可以使用`window.location.search`获取URL中的查询字符串部分,然后使用正则表达式或其他方法进行解析。例如,可以使用以下代码获取URL中的参数值: ```javascript let url = window.location.search; let params = new URLSearchParams(url); let paramName = params.get('paramName'); ``` 其中,"paramName"是需要获取的参数名。这种方法适用于不使用"vue-router"插件的情况。 综上所述,Vue获取URL参数的方法包括使用"vue-router"插件的`this.$route.query`属性和使用JavaScript原生方式的`window.location.search`结合正则表达式或`URLSearchParams`来解析URL参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 获取url地址的参数](https://blog.csdn.net/qq_42751978/article/details/130899303)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue 获取url参数、get参数返回数组的操作](https://download.csdn.net/download/weixin_38605538/14661016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值