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

      //获取数据

    }

  }

}