Bagaimana untuk menghentikan pelaksanaan baki skrip persediaan dalam api komposisi Vue 3

Question

Saya mempunyai subhalaman dengan kod serupa

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

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

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

// baki skrip persediaan dengan banyak kod
// seperti pengambilan data api
</script>

Ia berfungsi, jadi jika syarat itu palsu, ia akan mengubah hala. Masalahnya ialah - Vue masih melakukan persediaan skrip yang lain, seperti mendapatkan semua peristiwa data API yang tidak diperlukannya.

Adakah terdapat cara untuk "menghentikan" persediaan skrip?

Saya tidak boleh menggunakan middleware untuk ini kerana keadaan saya adalah berdasarkan pembolehubah ref yang disediakan oleh halaman induk. Jika saya cuba menyuntiknya pada tahap cangkuk penghala - ia tidak ditentukan.

Answer 1

Ia dilakukan seperti mana-mana tempat lain dalam JavaScript:

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

Kehadiran "banyak kod" menunjukkan bahawa komponen paparan boleh difaktorkan semula untuk mengandungi hanya kod yang diperlukan untuk penghalaan, dan selebihnya boleh diekstrak ke dalam komponen bersarang.