在为给定路由渲染页面之前,我想首先同步获取必要的数据。理想情况下,我希望在页面组件中获取数据,但我不反对在路由器文件中执行此操作。我已经阅读并尝试了各种方法,但部分挑战来自于这样一个事实:构建组件的方法也有多种,并且某些功能的使用也各不相同。
就我而言,我使用 Composition API 和
语法构建单文件组件。 Vue Router 文档链接讨论了“导航前获取”,其中我可以访问 beforeRouteEnter 或 beforeRouteUpdate,但这是使用选项 API 显示的。他们确实有 Composition API 的页面,提到我可以使用 onBeforeRouteUpdate,但它使用 setup() 函数。我想无论如何我都会尝试使用
:
但是,这不会执行。我尝试过的最接近的方法是使用 beforeEnter 防护来获取路由器中的数据,并将数据设置到 meta 属性上,然后可以在组件中的路由实例上访问该属性: p>
beforeEnter: (to, from, next) => {
fetch('https://pokeapi.co/api/v2/pokemon/ditto')
.then(res => res.json())
.then(res => {
to.meta.pokemon = res;
next();
});
}
但是有了这个,文档中指出, beforeEnter 仅在输入路由时触发。参数更改不会重新触发此问题,这意味着我必须在组件中的路线上设置一个观察程序。我还不如将所有这些逻辑都放在组件本身中。
我似乎找不到一个好的方法来做到这一点,但我可能忽略了一些事情。如果有人有一些指示或建议,我将不胜感激。提前致谢。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号