美文网首页
VUE-PC端项目遇到的坑总结

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

作者: Miamin | 来源:发表于2018-01-11 16:45 被阅读1705次

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

      //获取数据

    }

  }

}

相关文章

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

    1.跨域 其中说到跨域的话首要的就是axios的配置 // 创建axios实例axios.defaults.tim...

  • web前端基础兼容问题

    目的: 在web移动端项目开发中,经常会遇到各种各样的兼容性问题,但是之前都缺少总结,以前踩的坑可能还会再去踩一遍...

  • flex兼容问题

    目的: 在web移动端项目开发中,经常会遇到各种各样的兼容性问题,但是之前都缺少总结,以前踩的坑可能还会再去踩一遍...

  • SPA在微信浏览器中的兼容问题

    目的: 在web移动端项目开发中,经常会遇到各种各样的兼容性问题,但是之前都缺少总结,以前踩的坑可能还会再去踩一遍...

  • @芥末的糖-----lodash常用的方法

    好久没更新了,项目里遇到很多坑,总结一波,顺便给女友一用...两全其美 在干货之后有项目中遇到的坑,一些实战案例在...

  • CardView总结

    CardView 总结 背景实现遇到的坑基本用法 背景 公司想把之前的Web 教师端,转移到 原生实现,然后最近就...

  • 项目技术分享

    火车票项目技术分享 项目规划和安排 项目实现和vue所遇到的坑 项目展望和总结 资源分享 项目地址:火车票 火车票...

  • Linux系统盘占满后解决办法

    昨天遇到一个感觉很坑的问题,今天总结了一下昨天遇到的问题和解决办法,希望以后的小伙伴,和我一样遇到坑项目后,能快速...

  • 使用Jenkins持续集成Android项目遇到的坑

    在使用Jenkins配置Android项目的时候遇到了一些坑,总结下: 没有gradle.properties文件...

  • 项目遇到的坑

    整理出这些问题分享给大家,是为了避免大家在遇到此类坑时,犯同样错。 一.Xstream遇到的坑 1.对于Xml解析...

网友评论

      本文标题:VUE-PC端项目遇到的坑总结

      本文链接:https://www.haomeiwen.com/subject/nohtoxtx.html