Vue-引入querystring模块获取url参数

querystring模块npm官方文档
querystring模块node官方文档

querystring用于解析和格式化URL查询字符串的模块,主要用的方法有以下四个

querystring.parse()

querystring.stringify()

querystring.escape()

querystring.unescape()

qs是一个npm仓库所管理的包,可通过下面命令进行安装

npm install qs
// 或者
npm install querystring 

.
然后在需要使用的页面引入QS库
Vue项目用es6引入

import querystring from 'querystring'

node中需要require引入：

const querystring = require("querystring")

import引入模块跟require引入模块的区别

引入之后就可以使用模块的方法

querystring.parse(str,separator,eq,options)

• parse这个方法是将一个字符串反序列化为一个对象。
• str:指需要反序列化的字符串;
• separator(非必填):指用于分割str这个字符串的字符或字符串，默认值为"&";
• eq(非必填):指用于划分键和值的字符或字符串，默认值为"="
• options(非必填): 该参数是一个对象，里面可设置maxKeys和decodeURIComponent这两个属性
• maxKeys:传入一个number类型，指定解析键值对的最大值，默认值为1000，如果设置为0时，则取消解析的数量限制
• decodeURIComponent:传入一个function，用于对含有%的字符串进行解码，默认值为querystring.unescape。

querystring.parse("name=whitemu&sex=man&sex=women")
// 上面得到下面的对象
{
	name: 'whitemu',
	sex: ['man', 'women']
}

querystring.stringify(obj,separator,eq,options)

• stringify这个方法是将一个对象序列化成一个字符串，与querystring.parse相对。
• obj:指需要序列化的对象
• separator(非必填):用于连接键值对的字符或字符串，默认值为"&";
• eq(非必填):指用于划分键和值的字符或字符串，默认值为"="
• options(非必填): 传入一个对象，该对象可设置encodeURIComponent这个属性
• encodeURIComponent:传入一个function，用于对含有%的字符串进行解码，默认值为querystring.unescape。
• encodeURIComponent:值的类型为function，可以将一个不安全的url字符串转换成百分比的形式，默认值为querystring.escape()。

querystring.stringify({name: 'whitemu', sex: [ 'man', 'women' ] });
// 上面可以得到
'name=whitemu&sex=man&sex=women'

querystring.stringify({name: 'whitemu', sex: [ 'man', 'women' ] },"*","$")
// 上面可以得到
'name$whitemu*sex$man*sex$women'

querystring.escape(str)

• escape可使传入的字符串进行编码

querystring.escape("name=慕白")
// 上面可以得到 
'name%3D%E6%85%95%E7%99%BD'

querystring.unescape(str)

unescape方法可将含有%的字符串进行解码

querystring.unescape('name%3D%E6%85%95%E7%99%BD')
// 上面可以得到
'name=慕白'

结合location.search获取url参数

// 比如在下面的网址下
// https://36.vrm.cn/272?name=万丈测试&sex=2&birthday=1976-03-26&mobile=13049097000&src=xmt-jhy-FF_75_121&yinliuActivityId=121&yinliuUserId=3588001&yinliu_company_id=75

// 获取name,sex,birthday,mobile参数,一行代码就可以搞定
const {name, sex, birthday, mobile} = querystring.parse(location.search.replace('?', '')

// 获取参数对象
const params = querystring.parse(location.search.slice(1))
// 遍历参数对象 将每一个参数添加进userInfo对象里
Object.keys(params).forEach(key => {
	this.$set(this.userInfo, key, params[key])
})

不用querystring的话,原生js获取url参数

function getQueryString(name) = {
	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
	let r = window.location.search.substr(1).match(reg)
	if (r != null) return decodeURI(r[2])
	return null
	}
// 获取url的name参数
const name = getQueryString(name)

---

谢谢你阅读到了最后
欢迎点赞、评论、交流