Detailed explanation of the example of implementing parameter formatting of Vue application qs plug-in

npm install qs

import qs from 'qs'

//Introducing qsimport qs from  'qs'  
//Get global attribute configuration, you can use this.$qs to get the qs object in any component.$qs = qs

let data = ({
    "username":,
    "password":
});

username=renping&password=123456

//Resolve the objectlet res = this.$('query[name]=zhangsan')
(res)
//Console output result: {query:{name:'zhangsan'}}//Parse nested objectsres = this.$('query[name][nickname]=Miss San'er')
(res)
//Console output result: {query:{name:{nickname:'Xiaosaner'}}}}//When using nested objects, the maximum depth to which qs parses by default is the fifth layer (Note: from the first square bracket to the calculation, to the fifth square bracket)res = this.$('a[b][c][d][e][f][g][h][i]=j')
(res)
//Console output result:// a: {
//   b: {
//     c: {
//       d: {
//         e: {
//           f: {
//             '[g][h][i]': 'j'
//           }
//         }
//       }
//     }
//   }
// }
// depth parameter specifies the resolution depth//When qs is used to parse user input, the limitation of parsing depth can help alleviate user abuseres = this.$('a[b][c][d][e][f][g][h][i]=j', { depth: 1 })
(res)
//Console output result:// a: {
//     b: {
//       {[c][d][e][f][g][h][i]:'j'}
//     }
//   }
// }
// ignoreQueryPrefix ignores the beginning of the query string?res = this.$('?a=b&c=d', { ignoreQueryPrefix: true })
(res)
//Console output results：{a:'b':c:'d'}

// Use [] to parse the arraylet res = this.$('a[]=b&a[]=c')
(res)
//Console output result: {a:['b','c']}//Specify array indexres = this.$('a[0]=b&a[1]=c')
(res)
//Console output result: {a:['b','c']}//To parse a string into an array instead of an object, the value between [] must be a number// When creating an array with a specific index, qs compresses the sparse array to preserve only existing values ​​in their orderres = this.$('a[1]=b&a[15]=c')
(res)
//Console output result: {a:['b','c']}//The empty string is also a value and will be preservedres = this.$('a[]=&a[]=b')
(res)
//Console output result: {a:['','c']}res = this.$('a[0]=b&a[1]=&a[2]=c')
(res)
//Console output result: {a:['b',','c']}//qs limits the maximum index of the array to 20. Any array member with an index greater than 20 will be converted into an object with index as the keyres = this.$('a[100]=b')
(res)
//Console output result: {a:['100','b']}//arrayLimit option can modify the default limitres = this.$('a[1]=b', { arrayLimit: 0 })
(res)
//Console output result: {a:['1','b']}//Set parseArrays to false, the string does not parse into an arrayres = this.$('a[1]=b', { parseArrays: false })
(res)
//Console output result: {a:{'1','b'}}//If you use two formats in a mix, qs will parse the string into an object:res = this.$('a[0]=b&a[b]=c')
(res)
//Console output result: {a:{'0':'b',b:'c'}//Create an array of elements as objectsres = this.$('a[][b]=c')
(res)
//Console output results：{a:[{b:'c'}]}

//After object serializationlet res = this.$({ a: 'b' })
(res)
//Console output result: a=b//After the object is serialized, it is output after URI encodingres = this.$({ a: { b: 'c' } })
(res)
//Console output result: a%5Bb%5D=cres = this.$(res)
(res)
//Console output result: {a:{b:c}}//Set encode to false, prohibit URI encodingres = this.$({ a: { b: 'c' } },{encode:false})
(res)
//Console output result: a[b]=c//Set encodeValuesOnly to true, prohibit URI encodingres = this.$( { a: 'b', c: ['d', 'e=f'], g: [['h'], ['i']] }, { encodeValuesOnly: true })
(res)
//Console output result: a=b&c[0]=d&c[1]=e%3Df&g[0][0]=h&g[1][0]=i//When encode is set to true, set the encoder option to customize encoding methodres = this.$( { a: { b: 'c' } },{encoder:function (str) {
      return "a-b-c"
  }})
(res)
//Console output result: a-b-c=a-b-c// When the array is serialized, the index is displayed by defaultres = this.$({ a: ['b', 'c', 'd'] })
(res)
//Console output result: a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d That is: a[0]=b&a[1]=c&a[2]=d//Set indices to false not to display indexres = this.$({ a: ['b', 'c', 'd'] },{indices:false})
(res)
//Console output result: a=b&a=c&a=d//Set arrayFormat option to specify the array output formatres = this.$({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
(res)
//Console output result: a%5B0%5D=b&a%5B1%5D=c That is: a[0]=b&a[1]=cres = this.$({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
(res)
//Console output result: a%5B%5D=b&a%5B%5D=c That is: a[]=b&a[]=cres = this.$({ a: { a: ['b', 'c'] }},{ arrayFormat: 'repeat' })
(res)
//Console output result: a%5Ba%5D=b&a%5Ba%5D=c That is: a[a]=b&a[a]=c//When object serialization, the default is to use []res = this.$({ a: { b: { c: 'd', e: 'f' } } })
(res)
//Console output result: a%5Bb%5D%5Bc%5D=d&a%5Bb%5D%5Be%5D=f That is: a[b][c]=d&a[b][e]=f//Empty string and null value will be omitted, but = will be preserved//Attributes with value undefined will be completely ignored//By default, null value is treated as an empty objectres = this.$({ a:'',b: null, c: undefined })
(res)
//Console output result: a=&b=// A key without a value will return nothing (e.g. an empty object or an array)res = this.$({ a: []  } )
(res)
//Console output result:res = this.$({ a: {} } )
(res)
//Console output result:res = this.$({ a: [{}] } )
(res)
//Console output result:res = this.$({  a: { b: []} } )
(res)
//Console output result:res = this.$({ a: { b: {}} } )
(res)
//Console output result://DdQueryPrefix is ​​set to true to add it before the query string?res = this.$({ a: 'b', c: 'd' }, { addQueryPrefix: true })
(res)
//Console output result:?a=b&c=d//Serialize date objectvar date = new Date(7);
res = this.$({ a: date })
(res)
//Console output result: a=1970-01-01T00%3A00%3A00.007Z //The corresponding characters of %3A are:res = this.$({ a: date }, { serializeDate: function (d) { return (); } })
(res)
//Console output result: a=7//Use the sort option to modify the order of the keysfunction alphaSort(a, b) {
  return (b);
}
res = this.$({ a: 'c', z: 'y', b : 'f' }, { sort: alphaSort })
(res)
//Console output results：a=c&b=f&z=y