那些我们使用VUE2.0+Mint-ui+axios踩过的坑

那些我们使用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})
    })
  },