vue中qs插件的使用

Posted 2021-06-26 coderkey

一、vue后台传参出现问题

我在vue+element写了一个后台管理系统，在添加表单按钮post传参时无法正常的传递数据。之后通过搜索发现原因是传递参数要将参数序列化。
使用第三方工具qs来处理参数。

二、步骤：

1、首先先下载：

npm i qs 

2、然后引入 ：

main.js

import qs from 'qs'
Vue.use(qs)

组件使用

import qs from 'qs'

3、qs主要有两个方法 ：

方法一：将对象序列化成URL的形式，多个对象之间用&拼接（拼接是由底层处理，无需手动操作）

qs.stringify() 转换成查询字符串

let query = {parms: this.inputValue}
let newQuery = qs.stringify(query)

方法二：将URL解析成对象的形式（将序列化的内容拆分成一个个单一的对象）

qs.parse() 转换成json对象

let query = {parms: this.inputValue}
let newQuery = qs.parse(query)

三、vue中post传参数据为空：可以用下面的方法解决

组件引入：

import qs from 'qs’

使用：

qs.parse(qs.stringify(数据))