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

querystring.parse(str,separator,eq,options)
querystring.stringify(obj,separator,eq,options)
querystring.escape(str)
querystring.unescape(str)
结合location.search获取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)

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

Vue-引入querystring模块获取url参数相关推荐

js 获取url参数(QueryString)
/// <summary> /// 获取url参数 /// 王洪岐 /// </summary> function QueryString(fieldName) { var u ...
js获取url参数vue.js获取url参数 JQ获取url参数
在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 1.window.location.href(设置或获取整个 URL 为字符串) ...
gin框架之获取URL参数
gin学习之获取URL参数获取URL参数获取querystring参数获取form参数获取json参数获取path参数参数的绑定获取URL参数在前面的学习中,我们已经学会了使用gin框 ...
html的子页面获取自己url,如何从html页面获取url参数并将其显示在textarea中？
我用下面的在我的HTML页面的JavaScript功能,我想没有textarea的任何连接操作正常显示参数....如何从html页面获取url参数并将其显示在textarea中? function g ...
使用jquery获取url以及jquery获取url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1.jquery获取url很简单,代码如下1.window.location.href;其实只是用到了javascri ...
php解析url并得到url中的参数及获取url参数的四种方式
本文给大家介绍php解析url并得到url中的参数及获取url参数的四种方式,涉及到将字符串参数变为数组,将参数变为字符串的相关知识,本文代码简单易懂,感兴趣的朋友一起看看吧下面一段代码是php解析 ...
SQLAlchemy中模糊查询;JS中POST带参数跳转;JS获取url参数
SQLAlchemy中模糊查询,如何like多个关键字 JS中POST带参数跳转一个项目中要跳转到另外一个项目,还需要带参数考虑到安全性的问题,最好是用POST跳转,不能再URL中拼参所以找到了 ...
.NET手记-JS获取Url参数
最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...
ajax动态获取url参数值,获取URL参数的方法
一.URL:统一资源定位符 1.URL组成完整的URL由这几个部分构成: scheme://host:port/path?query#fragment 名词解释: scheme:通信协议.常用的ht ...

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

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

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

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

querystring.escape(str)

querystring.unescape(str)

结合location.search获取url参数

Vue-引入querystring模块获取url参数相关推荐

最新文章

热门文章