vue js navigate to url with question mark

Question

my Vue js project login template click button it redirects to like this

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

both Url show interface.
1st Url not set the local storage variable 'token'.
2nd Url is set the local storage variable 'token'.
how to solve it?

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

The form is getting submitted as the button you have provided in the form has type="submit" which is the default behaviour of a button present inside form even if you do not add the attribute type="button"

So replace the type submit to button o prevent form submission like this:

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

Answer 2

I just faced the same issue, and the provided solution did not worked for me (Vue 2.5.17).

I had to add a modifier to the @click event to prevent the default behavior:

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