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

---

前言

公司有一个项目，要求做到组件最大限度重用；由于项目比较赶，于是我决定使用比较熟悉VUE2.0来开发。没想到，让我踩了一大片的坑。虽然项目最终还是上线了，但是那些坑，让我每每想到都会有一股洪荒之力在体内流窜。

那些坑

1. 修改Mint-ui的样式
   项目中要对所有的客户端做适配，Mint-ui并做任何适配，因此，部分组件需要调整样式。可是在组件中去改变样式发现，并没有用。然而。在公共样式中去改却有效。不知道是因为Mint-ui组件是按需引入还是其他什么原因，一直未能找到。

2. axios请求
   项目开发时，由于后台没有做跨域处理，因此安装CROS插件。调试时，发现POST请求直接报：

   Response for preflight is invalid (redirect)

   但是使用jQuery的ajax却能成功发POST请求。什么原因，一直悬而未决。

3. IOS输入问题
   测试时，发现IOS键盘弹起，却无法输入，尼玛，什么鬼呀….于是各种百度，花了很长时间，才知道原来是html,body及通配样式里加了：

   -webkit-user-select:none;

   可是-webkit-user-select为什么会影响输入还不明就里。

4. 与客户端原生交互问题
   VUE的方法都是封装在自己的实例中，而IOS,Android能调用的JS对象，必须是全局的。这就必须得将某个方法暴露出来，这样破坏了vue方法的作用域，但是一直没有找到好的处理方法。

5. 页面数据不会更新问题
   在用户列表页面进入添加用户页面，添加完用户后返回用户列表页面，发现页面数据不会更新。why？？？原来页面调用查询用户数据的方法只在页面创建时执行了一次。
   决解办法：

    ....
    beforeRouteEnter (to, from, next) {
      next(vm => {
         vm.queryUsrList({page: 1})
     })
    },
    ...    

6. 再次进入页面表单数据还存在问题
   在用户列表页面进入添加用户页面，添加完用户后返回用户列表页面，当再次进入添加用户页面时，发现上次添加的用户信息还存在。原因是vue实例中还保存着上次输入的信息。
   决解办法：

       ...
       beforeRouteLeave (to, from, next) {
         this.$destroy()
         next()
       },
     ...

7. 路由参数变化，不会触发页面更新
   在用户列表中点击用户，跳转到用户详情页面。路由中会把用户ID传递到下一个页面。但是点击不同的用户，发现显示的是第一次得到得数据，与用户不匹配。原因还是页面调用查询用户数据的方法只在页面创建时执行了一次。

    beforeRouteEnter (to, from, next) {
       next(vm => {
         vm.queryUsr({userId: to.params.id})
       })
     },