做vue项目中遇到的坑总结与学习

1、出现跨域问题(已经进行跨域设置的情况下)

这个问题找了半天。。。。最后的解决方式:查看后台支持的编码格式和前端axios发送过去的的编码格式是否一致。不一致就会出现跨域问题。至于为什么也不明白,可能是浏览器认为不一致的编码就是跨域也可能就是浏览器的bug吧。

具体方式:可以安装一个叫qs的依赖,然后在请求前用qs.stringify()方法转一下再发送请求,就ok了。

首先下载qs:npm install qs 

然后引入import qs from 'qs'

在请求接口中设置一下:

代码: export function userLogin(params){
return service({
method:'post',
url:'/a/login',
data: qs.stringify(params), //主要是这一步很重要!
}).then((res)=>{return res.data}).catch((err)=>{console.log(err)})
}

2、vue多个路由绑定到同一个组件上,造成created只执行一次,就是说页面加载成功一次后就不能再变化,所以不论怎么触发路由跳转页面都只显示第一次加载的数据。

效果:点击左侧树节点实现右侧页面跳转

经查阅资料,原因是:这个和vue的生命周期有关系,出现这种情况是因为页面在加载成功后他的大多数钩子函数(如mounted、computed...)就不会再次触发,所以导致页面感觉没有实现跳转。

解决方法:针对这种情况,其实不需要进行页面切换,只需要页面中的数据发生变化就好。在页面中监听路由地址的变化,当地址变化的时候,就重新加载数据。

具体代码:

watch: {
'$route.path': function (to, from) {
this.initInfo();//调用相应方法
}
}

3、el-tree控件,鼠标手移到树节点上,鼠标手和节点显示不对应。

原因:样式设置有问题,通过f12调试发现,某条树节点的高度太高,以至于把其他的节点都覆盖住了,所以这个节点高度太高,跨度太大,所以鼠标手和节点位置会有偏差。

解决:修改每个树节点的高度。

4、el-tree控件,如何设置树节点选中背景颜色

解决:加上highlight-current

在样式中设置:

 

猜你喜欢

转载自www.cnblogs.com/jennydtt/p/11127745.html