如何停止执行 Vue 3 组合 api 中的其余设置脚本

Question

我有一个带有类似代码的子页面

<script setup>
import { inject } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isSomething = inject('isSomething')

if (!isSomething.value) {
  router.replace('/somepage')
}

// rest of setup script with a lot of code
// like api data fetch
</script>

它有效，所以如果条件为假，它将重定向。问题是 - Vue 仍然执行其余的脚本设置，例如获取不需要的所有 API 数据事件。

有没有办法“停止”脚本设置？

我无法为此使用中间件，因为我的条件基于父页面提供的 ref 变量。如果我尝试将其注入路由器挂钩级别 - 它是未定义的。

Answer 1

它的完成方式与 JavaScript 中任何其他地方一样：

if (!isSomething.value) {
  router.replace('/somepage')
} else {
  // rest of setup script with a lot of code
}

存在“大量代码”表明视图组件可以重构为仅包含路由必需的代码，其余内容可以提取到嵌套组件。