laravel vuejs 表单提交返回到与查询字符串相同的页面

Question

我正在尝试在如下组件中提交带有 laravel 和 vuejs 的表单：

          <form action="#" @submit.prevent="submitMobile">
            <div class="container my-5 z-depth-1">
                    <!-- Form -->
                    <form class="" action="">
                      <!-- Section heading -->
                      <div class="input-group">
                        <input class="form-control send-sms-btn" name="mobile"
                               v-validate="'required:11'" placeholder="_ _ _ _ _ _ _ _"
                               aria-label="Enter your email address"
                               aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <button class="btn-theme btn btn-md btn-primary rounded-right m-0 px-3 py-2 z-depth-0 waves-effect"
                                  type="submit" id="button-addon2">submit
                          </button>
                        </div>
                     </div>
                    </form>
          </form>

这是我的 vuejs：

    export default {
        props: [

        ],

        data: function () {
            return {

            }
        },

        methods: {   
          sendContactFormServer() {

            axios({
              method: 'POST',
              url: '/customer/send-sms',
              data: {
                "mobile": this.form.mobile,
              },
              headers: {
                'Content-Type': 'appllication/json',
                'Accept': 'application/json',
              }
            })
                .then(window.location.href = "/")
                .catch(error => console.log(error))
          },
          submitMobile: function() {
            this.$http.post('/customer/send-sms', this.formData).then(function(response) {
              console.log(response);
            }, function() {
              console.log('failed');
            });
          }
        }
    }

我尝试了 2 个函数，但它们都将我返回到带有我发送的输入的查询字符串的同一页面。现在我想知道如何在不刷新页面的情况下提交此表单。提前谢谢

Answer 1

试试this.$router.push()

https://router.vuejs.org/guide/essentials/named-routes.html

submitMobile: function() {
    this.$http.post('/customer/send-sms', this.formData).then(function(response) {
    
    this.$router.push({
        name: "route_name", // tis route name you need to add 
        query: { mobile: this.mobile },  
    });

    }, function() {
    console.log('failed');
    });
}