如何在设置挂钩中使用 beforeRouteEnter？答案

【问题标题】：How to use beforeRouteEnter in setup hook?如何在设置挂钩中使用 beforeRouteEnter？
【发布时间】：2021-06-03 12:09:14
【问题描述】：

如何在setup钩子中使用beforeRouteEnter？

the documentation 中没有提到 onBeforeRouteEnter 挂钩。仅记录了两个钩子 onBeforeRouteLeave 和 onBeforeRouteUpdate。

【问题讨论】：

标签： vue.js vue-component vue-router vuejs3 vue-composition-api

【解决方案1】：

在组合API中，setup的时序大致等同于Vue 2中的created，此时路由已经发生，所以setup内部的beforeRouteEnter没有任何意义.

如果适合您，您仍然可以在选项 API 中使用 beforeRouteEnter 和 setup：

setup() {
  console.log('SETUP')
},
beforeRouteEnter(to, from, next) {
  // Do something
  next({ path: '/foo' }); // Go somewhere else if necessary
  next();                 // Or stay here
}

或路由器中的beforeEnter 或beforeEach 可能会满足您的目的：

【讨论】：

但是当我需要获取数据并且遇到错误停留在旧页面时该怎么办？
正如我所解释的，setup 无法访问该实例，因为它还不存在。你不能按照你的要求去做。以下是我已经列出的 5 个替代方案：1.beforeRouteEnter + Vuex，2.beforeEnter + Vuex，3.beforeEach + Vuex，4.在验证beforeRouteEnter 路由后获取setup 中的数据， 5.使用选项api
这是 internal 实例，而不是您使用console.log(this) 获得的组件实例。在完成setup 之前，该内部实例无法访问data。 jsfiddle.net/sh0ber/f62rjd3s
我建议研究控制台中的对象。我知道的唯一读物是docs
真可惜。无论如何，谢谢！