Question

我尝试检测组件中的上一条路线。我使用beforeRouteEnter来找到它。它可以在 CreditAdd.vue 中使用，但是当我在 Back.vue 中使用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>

CreditAdd.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>

Answer 1

beforeRouteEnter和其他导航保护仅应在定义路由器中链接的Vue文件上起作用，这就是 Back.vue 不起作用的原因。

您可以使用普通的javascript获取以前的网址在 Back.vue

中

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

另一种方法是您可以将以前的路线存储在Vuex商店中，

在 AddCredit.vue 中，导航卫士所在的地方

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

然后在 Back.vue 中可以直接从商店中检索

beforeRouteEnter在vue子组件中不起作用

1 个答案: