如何在Vue3中短路组件创建和重定向？

Question

在仪表板布局中，我根据用户导航到的菜单呈现不同的组件。 我有一个父组件，其中包含

<render-view>

内的

<Suspense>

。

发生的情况是某些页面（组件）需要相当大量的数据。我正在使用组合 API，并在组件的

<script setup>

部分中获取数据：

<script setup>
const data = await fetch(...);
</script>

结合

<Suspense>

和

<render-view>

，一切正常：有一个加载屏幕，一旦请求完成，组件就会被渲染。

但是，我在处理此过程中可能发生的错误时遇到了麻烦。假设在

fetch

调用期间发生错误，我想将用户重定向到

/error

，如下所示：

await fetch().json().catch(e => { router.push("/error"); })

问题在于，尽管重定向，

<script setup>

代码仍继续运行，这会导致很多错误，可以在 devtools 控制台中进行验证。

我想停止一切并重定向，我不想尝试并运行依赖于无法加载的数据的其余代码。

我还尝试将所有数据获取移动到路由器

beforeEnter

，但问题是我无法显示加载旋转器，屏幕在

beforeEnter

运行时保持白色/空白/空，即使我先渲染加载组件之前

beforeEach

，结果是一样的

我还考虑过在路由器重定向之前获取所有数据，但随后我必须将其存储在其他地方，然后将其传递给

render-view

中的子组件，这对于这个问题来说似乎太复杂了。

我还尝试在一次获取中移动所有 JS 逻辑，但组件

<template>

在我重定向后仍尝试渲染。

关于如何处理这个问题有什么想法吗？

Answer 1

只需将代码包装到 async IIFE 中即可：

<script setup>

(async ()=>{

  try{
    const data = await fetch(...);
  }catch(error){
    router.push({to:'/error', params:{error}});
  }

})();

</script>