获取 url 中的参数

封装一个方法
我们熟知 url中的参数是以这种形式展示的
?id=123&name=tom&age=13…
第一种:基础用法 用字符串分割

所以。来吧展示
function getParams(key) {
	var result = {} // 定义一个全局的对象
	var str = window.location.search;
	if(str.startsWith('?')) { // 判断str以?开头的
		var strParams  = str.split('?')[1];
		var arrParams = strParams.split('&');
		//然后进行for循环,这里直接用了forEach
		arrParams.forEach((item) => {
			var temKey = item.split('=')[0];
			var temVal = item.split('=')[1];
			result[temKey] = temVal
		})
	}
	return result[key]
}
或者
getUrlParameter: function(field) {
    //获取Url 参数     
    var GET = {};
    var canshu=window.location.hash.split("?")[1]==undefined?'':window.location.hash.split("?")[1];
    if(canshu!=''){
      var strarr = canshu.split("&");
      for(i=0;i<strarr.length;i++){
        var xx = strarr[i];
        var mykey = xx.split('=')[0];
        var myvalue = xx.split('=')[1];
        GET[mykey] = myvalue;
      }
    }
    return GET[field];
  }

第二种:URLSearchParams
这个方法是JS的内置对象,可以映射出来search查询条件
使用get方法,可以获取指定的参数

function get ParamsNew(key) {
	var temData = new URLSearchParams(window.location.search);
	return temData.get(key)
}

在这里插入图片描述
结束
拓展
当我们进行数据修改的时候,假设我们要获取ID去展示

var id = getParamsNew('id');
if(id){
	// 有id的时候就要加载数据
	loadData(); // 把需要修改的数据填充在表单里面
};
// 方法
function loadData() {
	var strPeople = localStorage.getItem('myStudent'); // 我们从localStorage中取值
	var people = [];
	if(strPerple) {
		people= JSON.parse(strPeople);
	}
	// 如果箭头函数只有一行的话,可以不写return
	// 我们利用数组中的find方法,查找复核条件的数据
	var person = people.find((item) =>{
		item.id == id // 查找符合条件的项
	})
	// 进行赋值操作
	XXname.value = person.name;
	XXage.value = person.age;
	.....// 这样就赋值成功了
}

这样就可以进行编辑展示,但是要注意是否是新增和修改在一块的,如果在一块就要在保存的时候加判断条件了
可以看这个文章https://blog.csdn.net/lzfengquan/article/details/118605300?spm=1001.2014.3001.5501

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp获取url参数值可以通过`this.$route.query`或者`this.$mp.query`来获取。如果你想获取url的code参数,可以使用以下代码: ```javascript // 获取query对象 const query = this.$route.query; // 获取code参数 const code = query.code; ``` 或者 ```javascript // 获取query对象 const query = this.$mp.query; // 获取code参数 const code = query.code; ``` 以上代码展示了如何在uniapp获取url参数值。你可以使用`this.$route.query`或者`this.$mp.query`来获取整个query对象,然后通过.操作符获取特定的参数值,比如code参数。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span> #### 引用[.reference_title] - *1* *2* *3* [【uniapp】获取url参数this.$route.query或this.$mp.query](https://blog.csdn.net/qq_44632227/article/details/131086996)[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%"] - *4* [小程序爬坑——扫码进入程序参数获取](https://download.csdn.net/download/weixin_38528459/16209687)[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、付费专栏及课程。

余额充值