针对VUE开发中遇到的坑，VUE这个国人开发的强大前端框架，elementUI的高密度集成也给后端人员带来了极大的好处入门坑坑洼洼。今天就来说说VUE和ElementUI整合的一些坑。VUE刷新页面后，导航栏被选中并重置。大家都知道ElementUi的导航栏组件会有一个默认的选择。tabs，我们可以通过鼠标点击来切换tabs，但是开发中每次刷新页面，我们点击过的tabs都会重置，但是显示的页面还是上次选择tab后跳转的页面，你可以先看图：没有选择标签时，默认显示首页（代码）：没有选择标签时，默认显示首页（效果）：但是如果此时点击其他标签，这样ashehe，你会发现标签页重置为首页点击hehe点击hehe刷新后错误分析：由于标签页默认选择绑定到vue实例中绑定的值不变，所以每次刷新后，值都会改变，重新渲染到tab页，然后会有刷新重置的效果，可以猜到，把值改成动态获取即可解决方法：在vue中改值直接绑定到标签上实例到：this.$route.pathThis值表示当前路由地址，即每个标签页的索引值；设置好后，看看效果：设置代码ps：该方法必须要求标签的index属性的值必须是正确的路由路径。刷新ElementUI中的树形形式相信大家也经常用到。其中包含的子数据在分类展示的时候非常直观，但是小编在使用中还是发现了一个小坑，就是使用axios删除或者修改某个子数据后，子数据不会自动渲染到页面，如下图所示：树表大澜：测试代码后发现，这个下拉箭头只有在当前页面第一次点击时才会进入子加载代码,所以此时修改了子数据，即使再次点击下拉箭头，子数据也不会更新。也可以测试一下看效果解决方案：//修改操作后重新查询执行如下代码this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap,parentId,list);//参数1写死//参数2表示需要跟随新的父数据id值//ps：不一定是id根据表中row-key="id"绑定的值自行确认//参数3更新后的数据为via的数据修改后重新查询数据，大坑3，axios在vue中发送post请求时传递参数的问题。大家都知道在post请求中传递参数的方法就是使用请求体携带的方法来传递参数。那么在post中传递参数的时候，前端的数据格式是json，后端是java，所以在vue前端分离项目中，会出现后端参数收不到的情况情况一：前端传过来的json格式是objectjson的形式解决办法：在springbootcontroller对应的方法的参数位置添加@RequestBody注解情况2：前端传过来的json格式是key的json-值对方案一：利用vue组件qs拼接成键值对ps：qs需要单独下载方案二：利用js内置对象URLSearchParams拼接出一个标准的键值对参数ps：这个方法对浏览器不兼容，所以还是不好大坑4vue方法中代码执行乱序的问题是因为vue大量使用axios发送异步方法，所以代码执行后遇到异步hronous请求，它不会等待异步请求的执行完成。这时候，如果下面的代码需要使用异步请求的返回结果，那么问题就来了：还是使用上面的树形形式比如我们修改操作的时候，需要使用异步请求发送到后台查询最新数据，然后执行vue更新数据方法。这个时候经过测试发现vue更新数据的方法会先执行，所以此时不??会更新数据。不是最新的数据，会导致渲染失败，代码：//删除一个levelhandleDelete(index,row){//deletedpostrequest1this.$http.post("url",parem).then((res)=>{_this.mesg(res);});//重新查询数据并将数据赋值给this.parentData2this.findByLevel();3console.log(this.parentData);//更新子数据4his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap,row.parentId,this.parentData);},//查看页面效果，发现表子数据为notupdatedbuttheDBupdatesthedatacorrectly//经过测试发现第三步打印最新数据并不是DB的最新数据这相当令人困惑。很明显，数据是新的。大家猜猜是第二步更新数据的方法不等待第一步的执行，还是第四步不等待第二步的执行？这个问题我拿了一会儿，最后发现猜的没错，找了一个更好的例子网站发给大家：async函数使用的解决方法：//在方法asynchandleDelete(index)上标记async函数,row){//标记awaitawaitthis.$http.post("url",parem).then((res)=>{//ps:如果异步请求请求中包含另一个异步请求，即使async和await在内部请求中使用，也是无效的，仍然不会等待这个方法的执行_this.mesg(res);});//同时标记awaitawaitthis.findByLevel();console.log(this.parentData);his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap,row.parentId,this.parentData);}，写在后面了，所以今天关于vue使用中发现的坑的讨论就到这里了，以后遇到高阶坑还是会更新文章的。请多加注意。如果您有任何问题，请随时留言。自觉尊重和转发人民群众的劳动成果，请注意！！！
