踩过的坑

1、路由跳转变量修改问题

想实现根据路由名称的不同修改变量registerRoute的状态，从而通过这个变量来控制某一组件的显示与隐藏

因为是在模板文件中添加的，先直接尝试将data中变量设置为registerRoute:this.$route.name === 'gszc'?true:false，然后发现行不通，因为模板文件中路由跳转时页面未刷新，因此data中值的改变并不会立即更新视图，所以需要将修改的方法放在updated钩子函数中，如此点击链接跳转路由时视图就会立即更新了

...
    updated(){
        this.registerRoute = this.$route.name === 'gszc'?true:false
     }

2、mand mobile中swiper组件事件监听问题

如果要给swiper内部的元素添加事件监听，需要在md-swiper标签上添加is-prevent="false"，因为他默认为true，不设置的话将会阻止默认的事件

3、elementUI中el-select传值为对象的问题

业务有一个添加和编辑表单的功能，后端要求通过表单接收两个值，一个部门ID一个部门名字，且要求这俩值与其他属性平级，因此将select的option的value绑为一个对象，在提交的方法里再将value的值取出，放入表单的对象中进行传值，el-select中识别对象的标识仅需要添加value-key即可，添加功能没啥问题

编辑时需要接受后端传来的值，我本来的想法是将接收到的值处理成和option绑定value一样的对象，但发现死活渲染不上，然后通过console比对俩对象，发现根本不相等，接着就想到根据接收到的部门ID获取当前部门在options数组中的下标，然后将数组中对应下标的对象绑定到v-model，这样就能成功渲染了

4、父级html给子级iframe传值跨域问题

父级使用PostMessage传值给子

document.getElementById('iframe').contentWindow.postMessage('message', '*')      //message为传过去的数据，字符串、对象、数组均可，*代表任意域名

子级使用window.addEventListener接受数据

window.addEventListener('message', function(e){
        console.log(e.data)
    })

由于子级iframe加载较慢，使用PostMessage发送数据时要等子级加载完成后方能发送，否则发过去子级也接收不到，因此需要将代码写在window.onload中(此bug困扰我接近1天，实在不应该)

5、vue中关于路由拦截与组件生命周期的顺序问题

router.beforeEach会比组件的周期先执行，我在组件的destroyed周期中执行了函数，本以为会是它先销毁再执行路由拦截中的方法，没想到是先执行路由拦截的方法，再执行组件的生命周期

路由跳转时组件之间的生命周期顺序，先执行to组件的beforeCreate,created,beforeMount以后再执行from组件的destroyed，接着才是to组件的mounted

6、vue项目中的代理配置问题

vue2的代理配置在vue.config.js中，配置好后axios的baseUrl路径也应该改成'/api'(如果代理配置的前缀是/api的话)，如果baseUrl的路径为全路径的话代理将会不起作用

7、点击提交按钮时页面刷新的问题

提交按钮的button位于form标签中，没有加type，所以表单会执行提交操作，会刷新页面，需要给button加上type="button"阻止默认提交事件

8、换行相关问题

在内容中添加\n进行换行时，页面并未渲染\n字符，但也没有换行效果，这里需要给他的父级css加上white-space:pre-line属性，这样就可以生效了

9、浏览器preview和response的值不一致

浏览器会自动把response中的值转成JSON格式，再显示到preview中，然而JavaScript存在数字精度问题，因此当接口的值（例如id）是多位数字而不是字符串时，转换时会出现数字不一样的问题，因此要以response的值为准