vue js navigate to url with question mark - vue.js

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>

Answer 3

Changing the button type to button, you disable default form behaviour, like pressing enter and release submit event.
Just add a modifier to the #submit or #reset event to prevent default behaviour:
<b-form #submit.prevent="onSubmit" #reset.prevent="onReset">

Answer 4

In order to keep the default behaviour of submitting the form using the "Enter" key on the keyboard as well, another solution is:
to keep the type = 'submit' on the button
handle the event parameter on the callback and process it with event.preventDefault(); like that:
login(event){
event.preventDefault()
var data = {
email:this.email,
password:this.password
}
...
}
Event.preventDefault() will prevent the default behaviour which is here to submit the form on the current url with the issue we are dealing with here.
See https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault