vue安装qs并使用

qs是一个用于url参数转化（parse和stringify）的库。可以将一个普通的object序列化成一个查询字符串，也可以将一个查询字符串解析成一个object。

安装qs

npm install qs

引入全局的qs

// vue3 的用法
import qs from 'qs';
const app = createApp(App);
app.mount('#app');
app.config.globalProperties.$qs = qs;
// vue2 的用法
import qs from 'qs';
Vue.prototype.$qs = qs;

使用qs进行字符串转化和解析

let urlparamString = 'name=123&age=12';
let urlparamObj = this.$qs.parse(urlparamString)
console.log(urlparamObj); // 输出 {name: '123', age: '12'}
console.log(this.$qs.stringify(urlparamObj)); // 输出 name=123&age=12

当需要传递数组时，可以使用下面的方法

默认情况

console.log(this.$qs.stringify({'a': ['b', 'c', 'd']})); // 输出 a[0]=b&a[1]=c&a[2]=d

重写这种默认方式为false

console.log(this.$qs.stringify({'a': ['b', 'c', 'd']},{ indices: false })); // 输出 a=b&a=c&a=d

可以通过arrayFormat 选项进行格式化输出

console.log(this.$qs.stringify({'a': ['b', 'c', 'd']},{ arrayFormat: 'indices' })); // 输出 a[0]=b&a[1]=c&a[2]=d
console.log(this.$qs.stringify({'a': ['b', 'c', 'd']},{ arrayFormat: 'brackets' })); // 输出 a[]=b&a[]=c&a[]=d
console.log(this.$qs.stringify({'a': ['b', 'c', 'd']},{ arrayFormat: 'repeat' })); // 输