当前,我在myproject中使用vuejs,创建登录页面,当我在登录名中输入用户名和密码时,无法打开另一个页面,当我在登录表单中输入用户名和密码然后单击登录按钮时它清除了所有字段,但无法打开我的仪表板,即dashnoard id =“ dboard”
Login.vue
<template>
<div id="login">
<CContainer class="d-flex content-center min-vh-100">
<CRow>
<CCol>
<CCardGroup>
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<CInput
placeholder="Username"
autocomplete="usernameemail"
>
<template #prepend-content><CIcon name="cil-user"/></template>
</CInput>
<CInput
placeholder="Password"
type="password"
autocomplete="curent-password"
>
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
</CInput>
<CRow>
<CCol col="6" class="text-left">
<CButton color="primary" class="px-4" type="submit" @click="login()">Login</CButton>
</CCol>
<CCol col="6" class="text-right">
<CButton color="link" class="px-0">Forgot password?</CButton>
<CButton color="link" class="d-md-none">Register now!</CButton>
</CCol>
</CRow>
</CForm>
</CCardBody>
</CCard>
<CCard
color="primary"
text-color="white"
class="text-center py-5 d-sm-down-none"
body-wrapper
>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<CButton
color="primary"
class="active mt-3"
>
Register Now!
</CButton>
</CCard>
</CCardGroup>
</CCol>
</CRow>
</CContainer>
</div>
</template>
<script>
export default {
name: 'Login',
data(){
return{
input:{
usernameemail:"",
password:""
}
}
},
methods:{
login() {
if(this.input.usernameemail != "" && this.input.password != "") {
if(this.input.usernameemail == this.$parent.mockAccount.usernameemail && this.input.password == this.$parent.mockAccount.password) {
this.$emit("authenticated", true);
this.$router.replace({ name: "dboard" });
} else {
console.log("The username and / or password is incorrect");
}
} else {
console.log("A username and password must be present");
}
}
}
}
</script>
答案 0 :(得分:0)
如果除this.$router.replace
方法之外的其他所有方法都正确,请尝试使用push
代替replace
this.$router.push({ name: "dboard" });