App.vue のページ状態管理を、単純な currentPage で回した設計判断

はじめに

DVDレンタル顧客向けアプリでは、Vue Router を採用せずに App.vue の currentPage 変数だけでページ遷移を管理しています。 この設計判断に至った経緯をまとめます。

なぜ Vue Router を使わなかったか

• アプリの規模と要件を考慮した結果、シンプルな状態管理で十分だった
• Spring Boot バックエンドとの連携を優先し、フロントの構造はシンプルに保つ方針

currentPage 管理の実装

<!-- App.vue (抜粋) -->
<script setup lang="ts">
import { ref } from 'vue'
const currentPage = ref('home')
</script>

実際の画面

学んだこと

単純な状態管理でも、ページ数が増えると遷移ロジックが分散しやすくなります。 一定の規模を超えたら Vue Router への移行を検討する価値があります。