使用vuejs开发项目中遇到的问题总结

最近有幸能使用vuejs开发公司的图片管理系统,之前都是小打小闹,自己在本地写写demo,自然也没遇到什么坑爹的问题。

这次和大家分享一下我在该项目中遇到的坑。

1、使用axios.js处理异步加载时发现请求时传递参数会直接发送js对象到后端,而不是发送Form Data,下面是两种传递参数方式的对比。

而且post请求会发送两次请求,第一次的method是OPTIONS,第二次才是POST。

解决办法:配合qs插件使用,也就是将对象格式化成FormData,类似jquery的serializeArray()方法

var qs = require('qs');
var str = qs.stringify(obj);

2、使用vue-router时URL模式引发的问题。
vue-router提供一个mode参数,用来控制url的格式,默认的是用hash格式,而我在项目中使用的是history格式。

const router = new VueRouter({
    mode: 'history',
    routes: [...]
})

对比一下两种url格式的差异:

hash模式:http://localhost:8080/#/image/manage
history模式:http://localhost:8080/image/manage

使用history模式后发现手动切换页面一切正常,但刷新页面时会提示页面不存在(404)。原因就是后端程序把url解析了,而使用hash模式url中会有一个#号分割,后端默认不会解析#后面的参数。
这个问题其实在vue-router官方文档中也有介绍。

打赏支持

如果文章对你有帮助就打个赏吧~

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

评论

还没有任何评论,你来说两句吧

发表评论

Powered By Yuuk