我有一个登录组件,它有以下方法:
login() {
this.$v.loginValidationGroup.$touch();
if (this.$v.loginValidationGroup.$error) {
return;
}
this.setLogsInfo();
userService.login(this.email, this.password, this.twoFactorAuthCode, this.rememberMe, this.userOs, this.userIp, this.userAgent, this.browserName)
.then(authenticationToken => {
if(authenticationToken === "2FactorAuthRequired") {
this.is2FAuthEnabled = true;
}
else {
this.$store.dispatch('login', authenticationToken);
this.$router.push('/Home');
}
})
.catch(error => {
if (error instanceof AuthenticationError && error.errorType === AuthErrorType.WRONG_CREDENTIALS) {
this.loginError = 'wrongLoginCredentials';
} else if (error instanceof ValidationError) {
this.loginError = 'invalidLoginCredentials';
} else {
this.loginError = 'unknownLoginError';
}
this.$v.$reset();
});
},
登录后,用户被重定向到“主页”组件。
在我的Home组件上,我创建了一个包含欢迎消息的模态:
<template>
<div class="modal v-model="visible">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Welcome</h5>
</div>
<div class="modal-body">
some text....
</div>
</div>
</div>
</div>
</template>
当从登录组件路由到主页组件时,有什么方法可以告诉应用程序将v模型“visible”设置为true吗?请注意,我只希望在从登录组件进入页面时将v模型设置为true,而不是任何其他组件。
2条答案
按热度按时间pzfprimi1#
基本上,你可以使用名为“beforeRouteEnter”的组件内导航保护。在其中,你可以访问路由器导航的路由。你检查
from
路由是否是登录路由。然后通过next
函数提供的vm
组件示例设置visible
变量(请记住,在此导航保护中,您无权访问this
组件示例)家庭成员:
64jmpszr2#
在
Home.vue
组件中,您可以设置一个路由器监视器,它将具有to
和from
参数,以检查previous
和current
路由。举个例子-
Home.vue