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

Posted 2023-02-16

【中文标题】如何在设置挂钩中使用 beforeRouteEnter？

【英文标题】：How to use beforeRouteEnter in setup hook?

【发布时间】：2021-06-03 12:09:14

【问题描述】：

如何在setup钩子中使用beforeRouteEnter？

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

【参考方案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

真可惜。无论如何，谢谢！