自我总结项目中遇到的困难（vue篇）

1.elementui中 防止错误提示框多个弹出
可以直接调用(Message as any).colseAll()

2.el-table用v-if隐藏显示列和预期不符问题
给el-table-column加一个key属性，:key="item.id"或者其他的，确保每列的key值不同就可以了，key值唯一表识
vue会尽可能的高效的渲染元素，通常恢复已有的元素而不是从头开始进行渲染，因此使用key值可以提高渲染效率，同理，改变某一个元素的key值会使该元素重新被渲染

3.axios请求中post请求的坑
刚开始的坑是，使用axios的post方法请求数据，数据被拦截，数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的，需要自己判断，或者使用提请的 qs 方法，将传给后端的数据进行下处理。

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。
使用axios，调用后端接口时使用到的。

请求方式为post，axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urllencoded’，将对象或数组的参数使用qs.stringify()进行序列化转化

qs使用

介绍它的两个方法：stringify和parse。
qs.stringify(data)

stringify方法，是将对象序列化成url形式的字符串，以&符号进行拼接。

示例及输出效果如下:

const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式：',qs.stringify(userObj)
 
 
// 转换后的格式：name=xiaoming&password=123123
1
2
3
4
5
6

qs.parse(data)

parse方法，是将URL形式的字符串解析成对象

示例及输出效果如下:

import qs from 'qs'
 
const userStr = 'name=xiaoming&password=123456'
//qs.parse(userStr)
console.log('转换后的格式：',qs.parse(userStr))
1
2
3
4
5

4.路由传参的功能的坑
之前一直使用路由传参，但是当本页面刷新的时候，页面上是没有参数的，因为参数是从上个页面传入进来的。
解决办法：使用了缓存，和vuex状态管理。但是由于项目并不是很大型的项目，所以使用最多的是缓存。

5.页面缓存的坑
有个填写信息的页面，需要填写一部分信息，进入查新协议页面，返回的时候，页面上填写的信息还需要留存。 解决办法：使用vue提供的keep-alive，来完成页面的缓存的。