如何停止執行 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
}

存在「大量程式碼」表示視圖元件可以重構為僅包含路由必需的程式碼，其餘內容可以提取到巢狀元件。