美文网首页
解决vue 问题 post 请求发送 会变成发送get请求

解决vue 问题 post 请求发送 会变成发送get请求

作者: 小本YuDL | 来源:发表于2019-09-17 22:29 被阅读0次
    问题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, 我好难啊!

    相关文章

      网友评论

          本文标题:解决vue 问题 post 请求发送 会变成发送get请求

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