So stoppen Sie die Ausführung des Rest-Setup-Skripts in der Vue 3-Kompositions-API

Question

Ich habe eine Unterseite mit ähnlichem Code

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

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

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

// Rest des Setup-Skripts mit viel Code
// wie API-Datenabruf
</script>

Es funktioniert. Wenn die Bedingung also falsch ist, wird eine Umleitung durchgeführt. Das Problem ist, dass Vue immer noch den Rest des Skript-Setups übernimmt, z. B. das Abrufen aller nicht benötigten API-Datenereignisse.

Gibt es eine Möglichkeit, die Einrichtung eines Skripts zu „stoppen“?

Ich kann hierfür keine Middleware verwenden, da meine Bedingung auf der von der übergeordneten Seite bereitgestellten Ref-Variablen basiert. Wenn ich versuche, es auf Router-Hook-Ebene einzuschleusen, ist es undefiniert.

Answer 1

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

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

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