VUE-PC端项目遇到的坑总结

1.跨域

其中说到跨域的话首要的就是axios的配置

// 创建axios实例

axios.defaults.timeout = 60000 // 响应时间

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

axios.defaults.headers.Authorization = 'WSAuth' + toBase64Encode(getToken())

// 配置请求头

axios.defaults.baseURL = process.env.BASE_API

// 这个是必须配置的

axios.defaults.withCredentials = true


共同一个fetch请求

2.传输附件后台接收不到

主要原因是后台使用的是Multipart数组接收,vue这边使用的是formdata,红框一定要这样写,我被坑了好久,并且传输文件类的时候,不需要设置contentType,由于我用axios共同全局设置了这个 'Content-Type': 'multipart/form-data' 之后导致浏览器解析的时候,没有这个boundry(见图),最后还是用了vue-resource中的http解决的


红框一定要这样写


这个分割文件的标志位


vue-resources

3.权限菜单

由于后台不让前端带上角色和权限之类的信息,全部从后端拿数据,导致前端必须全部配置好所有的路由,通过后端返回的菜单信息filter出自己的菜单信息后显示

4.刷新画面

想要刷新页面就是这方法吧,挺好用

refreshPage() {

location.reload()

}

5路由变化页面数据不刷新问题

场景:比如商品详情数据,依赖路由的params参数获取的(ajax写在created生命周期里面),因为路由懒加载的关系,退出页面再进入另一个商品页面并不会运行created组件生命周期,导致文数据还是上一个数据。

解决方法:watch监听路由是否变化

watch: {

'$route' (to, from) { //监听路由是否变化

if(this.$route.params.id){//是否有id

//获取数据

}

}

}


转载于:https://juejin.im/post/5b7545cb51882561495c8dbd

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.