框架：vue
请求插件:axios

场景：

实现登录功能

错误场景：

点击登录按钮之后，页面跳转并显示cannot post/，请求后台的接口未被调用。
源码如下：

<form method="post" action="" class="layui-form" >
      <input name="username" placeholder="用户名" type="text" class="layui-input" v-model="username">
      <hr class="hr15">
      <input name="password" placeholder="密码"  type="password" class="layui-input" v-model="password">
      <hr class="hr15">
      <input value="登录" style="width:100%;" type="submit" @click="submitFunc()">
      <hr class="hr20" >
</form>

submitFunc(){
      if(this.username.trim() === ''){
        alert('用户名不能为空');
        return 0;
      }
      if(this.password.trim() === ''){
        alert('密码不能为空');
        return 0;
      }

      this.$axios({
        method:'post',
        url:'/api/portal/page/login',
        data:{
          username:this.username.trim(),
          password:this.password.trim()
        }
      }).then(res => {
        console.log(res)
      }).catch(reason => {
        console.log(reason)
      });
 }

原因：

登录按钮的类型为submit，点击之后进行了表单信息的校验，再请求后台接口。

解决办法：

将登录按钮类型改为button，或者登录按钮类型为submit时，加 return true或false
例：<input type="submit" name="Submit" value="注 册" onClick=" return check();">，在JS中判断的时候 写return true; 或者return false;