1. vue-router配置路由，当前路径与跳转路径一致时，会报错。
NavigationDuplicated: Avoided redundant navigation to current location: 所以在router的js里修改，添加
import Router from 'vue-router'
//修改router的跳转事件，取消报错提示。 const originalReplace = Router.prototype.replace
const originalPush = Router.prototype.push
Router.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err)
}
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
} 2. 上传文件接口接受不到参数
在 axios 的 headers 加上 'Content-Type': 'multipart/form-data',
传值使用 FormData 函数
const formData = new FormData()
fileList.forEach((file) => {
formData.append('file', file)
}
axios.post(url,formData,{
headers:{
'Content-Type': 'multipart/form-data',
}
}) 3. 给input赋值时，值不能重组两次
let obj=[{a:1,b:2}]
//错误
obj=[{a:1,b:3}]
//正确
obj[0].a=1;
obj[0].b=34. 监听数据或对象时，获取的新值和旧值一致时
data(){
obj:[{a:1}]
},
watch:{
newObj:{
handler(new,old){},
deep:true
}
},
computed:{
newObj(){
return JSON.parse(JSON.stringify(this.obj))
}
} 5. 使用keep-alive 和 vue-router 做页面缓存。
使用场景：A列表页➡B详情页，缓存A列表页的视图，使A不会被销毁。
当B➡A时，能够看到跳转前的数据。
当A➡B➡C➡A时，A不缓存，并且重新渲染。
当A➡C时，A同上。
此时需要配置的路由信息
//vue router "A": {
"meta": {
"keepAlive": true
} 模板页(只要使用router-view的地方即可)
列表页
beforeRouteEnter(to, from, next) {
if (from.path == 'B') {
to.meta.keepAlive = true
}
next()
},
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
} Tip：在router-view使用v-if 前一两次切换页面时是正常显示，到后面就不对了。
估计是 router-view 不能正常支持 v-if。
因为在 router-view 使用 v-show 是正常显示的，但是使用 v-show 会渲染数据两遍，所以我使用一个标签包裹 router-view，然后使用v-if，标签不一定使用transition，用div也可。
6. 当列表页使用 keepalive 缓存 和 vue-infinite-scroll 插件bug。
场景：
未使用 keepalive 前：
访问页面默认触发 vue-infinite-scroll 的 v-infinite-scroll（滚动到底部时，触发函数）
使用 keepalive 后：
由于页面缓存，列表页没有被销毁，详情页返回到列表页没问题。但问题出在，当从其他页面（C）跳转到列表页时，应当触发的 v-infinite-scroll 没有执行。
只有 C 页面滚动条下滑到一定位置，再跳转列表页，才会触发滚动函数。
或者一开始就在 C ，不需要滚动条下滑，直接跳转到列表页，也可以触发滚动函数。
第一种的原因：
跳转页面时，尽管列表页还未显示，但是html已经在了，并且滚动条不在顶部，所以会触发 v-infinite-scroll 。
第二种的原因：
页面未加载过，所以会触发 v-infinite-scroll 。
但是按这么说的话，离开列表页跳转到 C 时，列表页就应该被销毁了。
应该会触发 v-infinite-scroll ，但是就是没有触发。
以上的 bug 发生情况与 keepalive 没有直接联系，所以排查问题和解决问题时，完全找不到解决方法。但问题是在使用 keepalive 后发生的，所以也不能说没有关系......
个人认为 vue-infinite-scroll 可能存在 bug。但问题出现了，还是需要快速解决的。
所以很无奈的使用
//实例被挂载后触发
mounted() {
document.getElementsByClassName('ant-layout')[1].scrollTop = 21
}, 让滚动条向下滑一下，触发 v-infinite-scroll 事件。
由于我 UI 框架使用的 ant ，所以 dom 对象是 ant-layout 。滚动条不一定在 body，在解决时，查看滚动条是哪个dom对象。
持续更新ing