Vue点击登录的时候自动加了问号?

Question

1. 最近在用Vue来做登录页面, 当输入账号和密码之后, 点击登录刷新了一下, 莫名的在我路径后面多加了一个问号, 我在代码里打印没有打印出来, 但是当我第二次点击的时候才打印出来, 在打印后面给了路由跳转, 最后到路由跳转却执行不了?, 其次用debugger来做调试的, 我当前的判断竟然没有进去, 很奇怪, 判断可以打印, 用debugger调试没有执行

html

    <div class="login_form">
      <el-form :label-position="labelPosition" label-width="80px" :model="form">
        <el-form-item>
          <i class="account_icon"></i>
          <el-input v-model="form.userName" placeholder="登录账户" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <i class="password_icon"></i>
          <el-input type="password" v-model="form.password" auto-complete="off" placeholder="登录密码"></el-input>
        </el-form-item>
        <div class="checkbox">
          <input type="checkbox">
          <span class="login_password">记住密码</span>
        </div>
        <div>
          <button @click="onSubmit" :plain="true">登录</button>
        </div>
        <div class="login_embellish">
          <i class="embellish_one"></i>
        </div>
      </el-form>
      <i class="modifier_left"></i>
      <i class="modifier_right"></i>
    </div>

js

  export default {
    data() {
      return {
        labelPosition: "right",
        form: {
          userName: "admin",
          password: "admin123"
        },
      };
    },
    methods: {
      // 提交
      onSubmit() {
        let paramsData = {
          username: this.form.userName,
          password: this.form.password
        };
        debugger
        this.$ajax.post(this.$api.Login, paramsData).then(res => {
            if (res.data.status == 200) {
              console.log("res", res);
              let params = "";
              localStorage.params = JSON.stringify(res.data.data);
              localStorage.setItem("params",localStorage.params);
              this.$router.push({ path: "/index" })
            }else if(res.data.status == 401) {
              this.$message.error(res.data.message);
            }
          })
          .catch(err => {
            console.log(err);
          })
      }
    }
  }

1. 第一点击登录, 刷新了一下, 路径后面多加一个问号

1. 第二次点击登录, 才打印出来

4.用debugger调试, 判断没有进来

Answer 1

你用了 form 表单。 然你的 input 都没有name属性。 你应该在 onSubmit 时 阻止下冒泡或默认事件 就可以了。 或者 把 el-form 组件去掉。 因为也没什么必要，加了form 无非就是 在两个input 中按回车能自动提交。
就这样

Answer 2

我也出现url中加问号的情况，原因就是上面评论中说的form表单的提交事件。
我的解决方案是使用了click.prevent阻止默认事件，就好了。
<button @click.prevent="onSubmit" :plain="true">登录</button>

Answer 3

貌似button默认是submit类型

改成type="button"就可以了

<button type="button"></button>