将prop从一个vue路由器视图传递到另一视图以有条件地绑定类

Question

是否可以从先前的路由器视图向路由器视图发送布尔属性？

我试图单击“忘记密码”按钮，这将带我进入忘记密码的提示路径，我想根据以前的路径将“ slideRight / slidingLeft”道具更改为true。

基本上，如果用户单击“提交”以转到下一页，则我试图从右侧滑动内容，或者如果用户单击“后退”按钮以显示上一页，则试图从左侧滑动内容。

< script lang = "ts" >
  import {
    Vue,
    Component,
    Prop
  } from 'vue-property-decorator';
import ErrorMessage from '../components/ErrorMessage.vue';
import InputWithLabel from '../components/InputWithLabel.vue';
import FormButton from '../components/FormButton.vue';

@Component({
  components: {
    ErrorMessage,
    InputWithLabel,
    FormButton
  }
})
export default class LoginScreen extends Vue {
  @Prop({
    default: false
  }) slidingRight!: boolean;
  @Prop({
    default: false
  }) slidingLeft!: boolean;

  isSlidingRight() {
    this.slidingRight = true;
  }

  isSlidingLeft() {
    this.slidingLeft = true;
  }
}

<
/script>

.slideRight {
  position: relative;
  width: 100%;
  animation-name: slideIn;
  animation-duration: 0.5s;
}

@keyframes slideIn {
  0% {
    right: -668px;
  }
  100% {
    right: 0;
  }
}

.slideLeft {
  position: relative;
  width: 100%;
  animation-name: slideOut;
  animation-duration: 0.5s;
}

@keyframes slideOut {
  0% {
    left: -668px;
  }
  100% {
    left: 0;
  }
}

//LOGIN COMPONENT
<template>
    <div class="slidingBox">
        <div :class="{'slideRight': isSlidingRight, 'slideLeft': isSlidingLeft}">
            <div class="w-100 logo mb-50">
                <img src="/images/logo.png" alt="yqueue logo">
            </div>

            <div>
                <router-link class="backArrow" :to="{ name: 'landing'}"></router-link>
            </div>

            <div class="w-100 mb-50">
                <h1 class="font-20 text-black font-black mb-5">Sign In To Continue</h1>
                <p class="font-14 text-grey69 mb-10">We've found your account. Please enter your password to continue.</p>

                <error-message ref="errorMessage"></error-message>
            </div>

            <input-with-label v-model="identifier" type="text" :label="identifierLabel" :placeholder="identifier" :disabled="true"></input-with-label>

            <input-with-label ref="passwordInput" v-model="password" type="password" label="Password" placeholder="Not Specified" :disabled="processing"></input-with-label>

            <div class="buttonsContainer w-100">
                <router-link class="back btn btn-grey w-100" :to="{ name: 'landing'}" tag="button">Back</router-link>

                <form-button class="done btn-teal" label="Submit" :processing="processing" @click="submit"></form-button>
            </div>

            <div class="forgotPw mt-30">
                <router-link class="text-btn text-btn-teal font-black font-12" :to="{ name: 'forgot-password', params: { identifier: identifier }}" tag="button">Forgot Password</router-link>
            </div>
        </div>
    </div>
</template> //FORGOT PW COMPONENT
<template>
    <div class="slidingBox">
        <div :class="{'slideRight': slidingRight, 'slideLeft': slidingLeft}">
            <div>
                <router-link class="backArrow" :to="{ name: 'login'}"></router-link>
            </div>

            <div class="w-100 mb-50">
                <h1 class="font-20 text-black font-black mb-5">Forgotten Password</h1>
                <p class="font-14 text-grey69 mb-10">If you’ve forgotten your password, please enter in your details below.</p>

                <error-message ref="errorMessage"></error-message>
            </div>

            <input-with-label ref="identifierInput" v-model="identifier" type="text" label="Mobile Number / Email" placeholder="Not Specified" :disabled="processing"></input-with-label>

            <div class="buttonsContainer w-100">
                <router-link class="back btn btn-grey w-100" :to="{ name: 'login'}" tag="button">Back</router-link>

                <form-button class="done btn-teal" label="Submit" :processing="processing" @click="submit"></form-button>
            </div>
        </div>
    </div>
</template>