beforeRouteEnter 在 vue 子組件中不起作用

Question

我嘗試檢測組件中的先前路線是什么。 我使用beforeRouteEnter來找到它。 它在CreditAdd.vue中有效，但是當我在Back.vue中使用beforeRouteEnter時它不起作用！

我認為這是因為 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 中獲取之前的URL

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

另一種方法是您可以將先前的路線存儲在 Vuex 商店中，

在導航守衛工作的 AddCredit.vue中

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

然后在Back.vue中可以立即從商店中檢索