vue.js 如何从特定航线触发航线变更功能?

4xrmg8kj  于 2023-01-05  发布在  Vue.js
关注(0)|答案(2)|浏览(147)

我有一个登录组件,它有以下方法:

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,而不是任何其他组件。

pzfprimi

pzfprimi1#

基本上,你可以使用名为“beforeRouteEnter”的组件内导航保护。在其中,你可以访问路由器导航的路由。你检查from路由是否是登录路由。然后通过next函数提供的vm组件示例设置visible变量(请记住,在此导航保护中,您无权访问this组件示例)
家庭成员:

data(){
    return {
      visible: false
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === "/login") {
        vm.visible = true;
      }
    });
  },
64jmpszr

64jmpszr2#

Home.vue组件中,您可以设置一个路由器监视器,它将具有tofrom参数,以检查previouscurrent路由。
举个例子-
Home.vue

watch: {
  $route(to, from) {
    if(from.name == "Login") {
      this.visible = true;
    }
  }
}

相关问题