我的Vue js项目登录模板点击按钮,它会像这样重定向到

http://localhost:8080/#/login to http://localhost:8080/?#/login

两个Url都显示接口

登录.vue

<template>
    <div class="row col-sm-12">
        <form>
            <div class="form-group">
                <label>Email address:</label>
                <input type="email" class="form-control" v-model="email">
            </div>
            <div class="form-group">
                <label>Password:</label>
                <input type="password" class="form-control" v-model="password">
            </div>
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
            <button @click="login" type="submit" class="btn btn-success">Submit</button>
        </form>
    </div>


</template>

<script>
    export default{
        data(){
            return{
                email:'',
                password:''
            }
        },
        methods: {
            login(){
                var data  = {
                    email:this.email,
                    password:this.password
                }
                this.$http.post("api/auth/login",data)
                    .then(response =>  {
                        this.$auth.setToken(response.body.token)
                       // console.log(response)
                    })
            }

        }
    }
</script>

推荐答案

表单将被提交,因为您在表单中提供的按钮有type="submit",这是表单中存在的按钮的默认行为,即使您没有添加属性type="button"

因此,请替换类型submit to(提交到)按钮,以防止表单提交如下:

<button @click="login" type="button" class="btn btn-success">Submit</button>

Vue.js相关问答推荐

使用nuxt I18N验证规则消息翻译

带 Bootstrap 的 Vue js,导航栏菜单不起作用

更新 Shopware 管理 CMS 组件中的编辑器视图

在预渲染模式下部署 nuxt 3 时出错

Vue.js 3 没有组件的实例?

视图中的 vue 样式不适用于 html

禁用 vue-cli webpack 编码图像 base64

Vue:根元素内容和内容分发槽

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

Vuetify - 如何保持第一个扩展面板默认打开,如果我打开另一个面板,其他面板应该关闭?

在组件外使用 VueI18n 的问题

Modal 内部的 Vue.js AJAX 调用

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

如何异步验证 Vuetify 文本字段?

如何使用 JavaScript 按索引删除数组元素?

按键删除对象不会更新vue组件

Vuejs - 使用 v-if 切换的保持活动组件

错误:找不到模块'@vue/babel-preset-app'

使用 axios 和 vue.js 取消先前的请求

使用 svelte js 的原因