Vue 3 構成 API でセットアップ スクリプトの残りの実行を停止する方法

Question

同様のコードを含むサブページがあります

<スクリプトのセットアップ>
import { inject } から 'vue'
import { useRouter } から 'vue-router'

const ルーター = useRouter()
const isSomething = inject('isSomething')

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

// セットアップ スクリプトの残りの部分には多くのコードが含まれています
// API データ取得と同様
</script>

これは機能するため、条件が false の場合はリダイレクトされます。問題は、Vue が、必要のないすべての API データ イベントの取得など、スクリプト セットアップの残りの部分を依然として実行していることです。

スクリプトのセットアップを「停止」する方法はありますか?

私の条件は親ページによって提供される ref 変数に基づいているため、これにミドルウェアを使用することはできません。ルーターフックレベルで注入しようとすると、未定義になります。

Answer 1

これは JavaScript の他の場所と同じように行われます:

リーリー

「大量のコード」の存在は、ルーティングに必要なコードのみを含むようにビュー コンポーネントをリファクタリングでき、残りはネストされたコンポーネントに抽出できることを示します。