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

nit*_*ter 4 vue.js vue-router vue-component vuejs3 vue-composition-api

如何beforeRouteEntersetup钩子中使用?

文档中没有提到onBeforeRouteEnterhook 。只有两个钩子文档和.onBeforeRouteLeaveonBeforeRouteUpdate

Dan*_*Dan 5

在该组合物API,的定时setup大致等同于created在Vue的2到那时,已经发生路由,所以就没有意义一个beforeRouteEnter的内部setup

如果这对您有用beforeRouteEnter,您仍然可以在选项 API 中使用setup

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

beforeEnterbeforeEach路由器可能会成为你的目的:

  • 正如我所解释的,“setup”无法访问该实例,因为它尚不存在。你不能做你所要求的。以下是我已经列出的 5 个替代方案: 1. `beforeRouteEnter` + Vuex,2. `beforeEnter` + Vuex,3. `beforeEach` + Vuex,4. 在 `beforeRouteEnter` 路由验证后获取 `setup` 中的数据, 5. 使用选项 API (2认同)
  • 这是*内部*实例,而不是您通过 `console.log(this)` 获得的组件实例。在“setup”完成之前,该内部实例无法访问“data”。https://jsfiddle.net/sh0ber/f62rjd3s (2认同)
  • 我建议研究控制台中的对象。我知道的唯一阅读内容是在[文档](https://v3.vuejs.org/api/composition-api.html#getcurrentinstance) (2认同)
  • 真可惜。不管怎样,谢谢你! (2认同)