IT이야기

vue 하위 구성 요소에서 RouteEnter가 작동하지 않음

cyworld 2022. 3. 24. 22:04
반응형

vue 하위 구성 요소에서 RouteEnter가 작동하지 않음

나는 내 구성 요소에서 이전 경로가 무엇인지 탐지하려고 노력한다.나는 사용한다beforeRouteEnter그것을 찾기 위해서.CreditAdd에서 작동한다.하지만 내가 사용할 때는beforeRouteEnter뒤쪽에 안 되네!

Back 컴포넌트가 아이라서 그런 것 같아. 그런데 문제를 풀 수가 없어.

Back.vue:

<template>
  <i class="bi ba-arrow-right align-middle ml-3" style="cursor: pointer" @click="handleBack"></i>
</template>

<script>
export default {
  name: 'Back',
  data() {
    return {
      id: null
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log('please log');
    next(vm => {
      vm.fromRoute = from;
    });
  },
  mounted() {},
  methods: {
    handleBack() {
      if (!this.fromRoute.name) {
        this.$router.push({ name: 'dashboard' });
      } else {
        this.$router.back();
      }
    }
  }
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

크레딧애드.vue:

<template>
  <Layout>
    <template slot="header">
      <Back />
      <span>افزایش اعتبار</span>
    </template>

    <div class="col-lg-10 px-0">
      <Card>
        <template v-if="type == 'select'">
          <credit-add-way @select="changeType"></credit-add-way>
        </template>

        <template v-if="type == 'bank'">
          <credit-add-bank-way @back="changeType('select')"></credit-add-bank-way>
        </template>

        <template v-if="type == 'code'">
          <credit-add-code-way @back="changeType('select')"></credit-add-code-way>
        </template>
      </Card>
    </div>
  </Layout>
</template>

beforeRouteEnter그리고 다른 네비게이션 가드는 라우터에 링크가 정의된 뷰 파일에서만 작동해야 하며로 돌아가그래서.효과가 없는 것 같다.

플레인 javascript를 사용하여 Back에서 이전 URL을 얻을 수 있다.부에를 하다

mounted() {
  console.log(document.referrer);
}

또 다른 방법은 이전 루트를 Vuex 매장에 저장할 수 있고,

AddCredit에서.항법 요원이 근무하는 .

beforeRouteEnter(to, from, next) {
    // store this in vuex
  },

그럼 뒤쪽에서.vue는 가게에서 바로 회수할 수 있다.

참조URL: https://stackoverflow.com/questions/61929409/beforerouteenter-doesnt-work-in-vue-child-component

반응형