那些我们使用VUE2.0+Mint-ui+axios踩过的坑
2018年01月25日 10:26:55 Doniet 阅读数：683更多
个人分类： web前端
前言
公司有一个项目，要求做到组件最大限度重用；由于项目比较赶，于是我决定使用比较熟悉VUE2.0来开发。没想到，让我踩了一大片的坑。虽然项目最终还是上线了，但是那些坑，让我每每想到都会有一股洪荒之力在体内流窜。
那些坑
修改Mint-ui的样式
项目中要对所有的***端做适配，Mint-ui并做任何适配，因此，部分组件需要调整样式。可是在组件中去改变样式发现，并没有用。然而。在公共样式中去改却有效。不知道是因为Mint-ui组件是按需引入还是其他什么原因，一直未能找到。
axios请求
项目开发时，由于后台没有做跨域处理，因此安装CROS插件。调试时，发现POST请求直接报：
Response for preflight is invalid (redirect)
但是使用jQuery的ajax却能成功发POST请求。什么原因，一直悬而未决。
IOS输入问题
测试时，发现IOS键盘弹起，却无法输入，尼玛，什么鬼呀….于是各种百度，花了很长时间，才知道原来是html,body及通配样式里加了：
-webkit-user-select:none;
可是-webkit-user-select为什么会影响输入还不明就里。
与***端原生交互问题
VUE的方法都是封装在自己的实例中，而IOS,Android能调用的JS对象，必须是全局的。这就必须得将某个方法暴露出来，这样破坏了vue方法的作用域，但是一直没有找到好的处理方法。
页面数据不会更新问题
在用户列表页面进入添加用户页面，添加完用户后返回用户列表页面，发现页面数据不会更新。why？？？原来页面调用查询用户数据的方法只在页面创建时执行了一次。
决解办法：
....
beforeRouteEnter (to, from, next) { next(vm => {
vm.queryUsrList({page: 1})
})
}, ...再次进入页面表单数据还存在问题
在用户列表页面进入添加用户页面，添加完用户后返回用户列表页面，当再次进入添加用户页面时，发现上次添加的用户信息还存在。原因是vue实例中还保存着上次输入的信息。
决解办法：
...
beforeRouteLeave (to, from, next) {
this.$destroy() next()
}, ...路由参数变化，不会触发页面更新
在用户列表中点击用户，跳转到用户详情页面。路由中会把用户ID传递到下一个页面。但是点击不同的用户，发现显示的是第一次得到得数据，与用户不匹配。原因还是页面调用查询用户数据的方法只在页面创建时执行了一次。
beforeRouteEnter (to, from, next) {
next(vm => {
vm.queryUsr({userId: to.params.id})
})
},