Vue3中如何中断组件创建并实现页面重定向？

方案1：组件内用try/catch捕获错误并终止渲染 #

在<script setup>里把数据请求逻辑用try/catch包裹，出错时先执行路由跳转，再抛出错误让Suspense停止当前组件的渲染流程，后续依赖数据的代码就不会继续执行了：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

try {
  const res = await fetch('/api/large-data')
  if (!res.ok) throw new Error('请求失败')
  const data = await res.json()
  // 这里编写依赖data的业务逻辑
} catch (err) {
  // 先跳转到错误页
  await router.push('/error')
  // 抛出错误，让Suspense放弃渲染当前组件
  throw err
}
</script>

这个方案的优势：

• 跳转后抛出的错误会直接终止Suspense的渲染流程，避免后续代码执行
• 完整保留Suspense的加载状态，直到请求完成或出错

方案2：全局错误边界统一处理 #

创建全局错误边界组件，配合Suspense使用，把错误处理逻辑抽离出来，避免每个组件重复编写：

首先编写ErrorBoundary.vue：

<template>
  <slot v-if="!hasError"></slot>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const hasError = ref(false)

onErrorCaptured(async (err) => {
  // 根据实际错误信息判断是否为请求错误
  if (err.message.includes('请求失败')) {
    await router.push('/error')
    hasError.value = true
    // 返回true阻止错误向上传播
    return true
  }
  return false
})
</script>

然后在父组件中用它包裹Suspense：

<template>
  <ErrorBoundary>
    <Suspense>
      <template #default>
        <render-view />
      </template>
      <template #fallback>
        <!-- 你的加载状态组件 -->
        <div class="loading">加载中...</div>
      </template>
    </Suspense>
  </ErrorBoundary>
</template>

组件内的请求逻辑只需直接抛出错误即可：

<script setup>
const res = await fetch('/api/large-data')
if (!res.ok) throw new Error('请求失败')
const data = await res.json()
// 后续业务逻辑
</script>

方案3：封装请求工具函数统一处理错误 #

把请求逻辑封装成工具函数，在函数内部统一处理错误和路由跳转，简化组件代码：

// utils/request.js
import { useRouter } from 'vue-router'

export async function request(url) {
  const router = useRouter()
  const res = await fetch(url)
  if (!res.ok) {
    await router.push('/error')
    throw new Error('请求失败')
  }
  return res.json()
}

组件内使用时直接调用：

<script setup>
import { request } from '@/utils/request'

// 请求失败时，工具函数会自动跳转并抛出错误，后续代码不会执行
const data = await request('/api/large-data')
// 依赖data的业务逻辑
</script>

为什么之前的方案行不通？ #

• beforeEnter守卫：在组件渲染前执行，此时Suspense还未生效，无法触发加载状态，导致页面空白
• 提前获取数据再跳转：需要手动管理加载状态，逻辑繁琐，完全浪费了Suspense自动处理加载流程的优势
• 合并JS逻辑：组件模板已编译完成，即使JS逻辑中断，模板仍会尝试读取未定义的数据，依然会报错

内容的提问来源于stack exchange，提问作者victor