问题1:post 请求发送 会变成发送get请求。且get请求时url会携带参数,再当页面跳转之后依然携带
eg:
原本路由:
http://localhost:8080/login_phone?phoneNum=13259964092
想要跳转到 :http://localhost:8080/#/home
但是实际上却跳转到:
http://localhost:8080/login_phone?phoneNum=13259964092#/home
遍寻全网找解决方法,依然没得结果,然后找到一个好像是问题的原因:
vue-router 默认 hash 模式 —使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载,对于正常的页面来说,更换 url 一定是会导致页面的更换的, 而只有更换 url 中的查询字符串和hash值的时候才不会重新加载页面。
所以解决方法就是去掉了hash模式,就是下面这句,在router文件中添加mode:'history'
。
个人感觉这不是个好方法,但是它的确解决了问题。那就这样吧!
const router = new VueRouter({
mode: 'history', //这一句
routes: [...]
})
ps: 后来发现原因是 form表单的默认提交,但是如果不去处理,post 请求的时候,会发出一个get请求。 很大的bug!!! 之前一直不知道原因,真是让人头大。
问题2:表单数据进行提交,不用表单默认的submit提交方式,而是button+自定义方法,提交时,路由后面会多加一个问号,导致提交时,页面一直刷新,无法提交数据
其实,这也不算一个问题,而是算自己的一个bug,之前一直存在,不知道是问什么,后来才发现是form的默认提交问题。
解决方法:
- 用默认的表单提交(笨方法)
- 就不使用form标签,这样就不会有表单的默认提交而改变路由(笨方法)
- 阻止表单默认事件
<form @submit.prevent="onSubmit">
<input type="text" />
</form>
methods: {
onSubmit(){return false;}
}
总有很多的bug, 我好难啊!
网友评论