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

      //获取数据

    }

  }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容