我正在使用express和vuejs创建自己的博客。在login.vue中，我发现网站被重定向到localhost：8080 /？＃/ login后我按下了提交按钮＆＃39;在Chrome中。 （它在Firefox中运行良好）所以我必须登录两次＆＃39;为了登录。
在发布＆＃39;请求＆＃39;之后发生以下错误（响应）=＆gt; {...}
EventSource failed loading : GET "localhost:8080/__webpack_hmr"
XHR failed loading: POST "localhost:8080/login"
Navigated to localhost:8080/?
但有趣的是重定向到/？＃/ login后，它成功了。我只是想知道为什么会出现这种错误。我想这可能是Webpack错误，但我不知道如何修复它。
<template>
<div id="app">
<div class="alert alert-primary" role="alert" v-if="showAlert">
<h4 class="alert-heading">{{alertStatus ? "Success":"Warning"}}</h4>
<p>{{alertMsg}}</p>
</div>
<div v-if="!isLogged">
<form>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: logMode }" v-on:click="changeMode">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: regMode }" v-on:click="changeMode">Sign Up</a>
</li>
</ul>
<div class="form-group" key="email">
<input type="email" class="form-control" id="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group" v-if="regMode" key="email2">
<input type="email" class="form-control" id="emailConfirm" v-model="emailConfirm" placeholder="Enter email again">
</div>
<div class="form-group" v-if="regMode" key="nick">
<input type="text" class="form-control" id="nickname" v-model="nick" placeholder="Enter nickname">
</div>
<div class="form-group" key="password">
<input type="password" class="form-control" id="password" v-model="password" placeholder="Password">
</div>
<div class="form-check" key="check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button v-on:click="submit" class="btn btn-primary">{{isMode}}</button>
</form>
</div>
<div v-else>
<span> Already Signed in. </span>
</div>
</div>
</template>
<script>
export default {
name: 'login',
computed: {
logMode: function () {
if (this.isMode === 'Login') return true
else return false
},
regMode: function () {
if (this.isMode === 'Register') return true
else return false
}
},
methods: {
changeMode: function () {
if (this.isMode === 'Login') this.isMode = 'Register'
else if (this.isMode === 'Register') this.isMode = 'Login'
},
submit: function () {
console.log('submit on')
if (this.isMode === 'Register') {
this.$http.post('/register', {
email: this.email,
nick: this.nick,
password: this.password
})
.then((response) => {
console.log('get response!')
})
.catch(function (error) {
console.log(error)
})
} else {
if (this.email) {
console.log('email exist')
this.$http.post('/login', {
email: this.email,
password: this.password
})
.then((response) => {
console.log('hello response!', response.data)
var token = response.data.token
if (token) {
console.log('param test: ', this.email, response.data.nick, token)
this.isLogged = true
this.token = token
}
})
.catch(function (error) {
console.log(error)
})
}
}
}
},
data () {
return {
email: '',
emailConfirm: '',
nick: '',
password: '',
showAlert: false,
alertMsg: '',
alertStatus: false,
isLogged: false,
isMode: 'Login',
token: ''
}
}
}
</script>
<style>
#login{
margin: 50px;
}
.nav{
width: 320px;
padding: 10px;
}
.inputs-move {
transition: all 1s;
}
.inputs-item {
display: inline-block;
}
.inputs-enter-active, .inputs-leave-active {
transition: all 1s;
}
.inputs-enter, .inputs-leave-to {
opacity: 0;
transform: translateY(-30px);
}
</style>中