Question

我的Vue js项目登录模板点击按钮，重定向到这个

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

两个Url都显示界面第一个网址未设置本地存储变量＆＃39;令牌＆＃39; 第二个网址设置了本地存储变量＆＃39;令牌＆＃39; 怎么解决呢？

Login.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>

Answer 1

表单已提交，因为您在表单中提供的按钮具有\1，这是表单中存在按钮的默认行为，即使您未添加属性type="submit"

所以将类型提交替换为按钮o阻止表单提交，如下所示：

type="button"

Answer 2

将按钮类型更改为button，即可禁用默认的表单行为，例如按Enter键并释放Submit事件。只需将modifier添加到@submit或@reset事件中即可防止默认行为：

<b-form @submit.prevent="onSubmit" @reset.prevent="onReset">

Answer 3

我只是遇到了同样的问题，提供的解决方案对我不起作用（Vue 2.5.17）。

我添加了一个modifier到@click事件中，以防止出现默认行为：

<button class="btn btn-primary" @click.prevent="login">Login</button>

vue js导航到带问号的url

3 个答案: