Day 3: Vue 라우터 설정하기 – 페이지 간 이동하기

오늘은 Vue 라우터를 설정하여 페이지 간의 네비게이션을 가능하게 만들고, 앱에 주문 페이지와 주문 확인 페이지를 추가해보겠습니다. 라우터는 SPA(Single Page Application)에서 중요한 요소로, 사용자가 앱에서 페이지를 이동하는 것처럼 보이게 하면서도 실제로는 같은 HTML 페이지 안에서 컴포넌트만 전환하는 방식으로 작동합니다.

1. 라우터 설정 파일 만들기

1. index.js 파일에 기본 라우터 설정을 작성합니다.
   • OrderForm: 기본 경로(/)에서 주문 폼을 보여줍니다.
   • OrderConfirmation: 주문 확인 페이지(/confirmation)로 이동하면 주문이 완료되었음을 알리는 화면을 보여줍니다.

import { createRouter, createWebHistory } from "vue-router";
import OrderForm from "@/components/OrderFrom.vue";
import OrderConfirmation from "@/components/OrderConfirmation.vue";

const routes = [
  {
    path: "/",
    name: "OrderForm",
    component: OrderForm,
  },
  {
    path: "/confirmation",
    name: "OrderConfirmation",
    component: OrderConfirmation,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. OrderConfirmation.vue 컴포넌트 만들기

주문이 완료되었을 때 사용자가 확인할 수 있도록 OrderConfirmation.vue 파일을 components 폴더 안에 생성하고 다음과 같이 작성합니다.

<template>
  <div class="confirmation">
    <h2>주문이 성공적으로 접수되었습니다!</h2>
    <p>주문 내역을 확인해 주셔서 감사합니다.</p>
    <router-link to="/">홈으로 돌아가기</router-link>
  </div>
</template>

<script>
export default {
  name: "OrderConfirmation",
};
</script>

<style scoped>
.confirmation {
  text-align: center;
  padding: 20px;
}
</style>

이제 주문 완료 후 이 페이지로 이동하여 고객이 주문이 접수되었음을 확인할 수 있습니다.

4. 라우터 설정을 App.vue에 추가하기

src/App.vue 파일에서 라우터를 설정하여 앱에서 사용할 수 있도록 수정합니다.

<template>
  <div id="app">
    <h1>웹 주문 시스템</h1>
    <router-view />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

• router-view: 라우터가 설정된 경로에 따라 해당 컴포넌트를 표시하는 역할을 합니다.

5. 라우터를 main.js에 추가하기

프로젝트의 진입점인 src/main.js 파일에서 라우터를 불러와 앱에 적용합니다.

npm vue@latest 설치 시 이미 라우터와 피니아를 선택하였으므로 다음과 같이 라우터와 피니아가 불러온 것을 확인할 수 있습니다.

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

 

6. 주문 제출 후 확인 페이지로 이동하기

이제 주문이 제출되었을 때, OrderForm.vue에서 OrderConfirmation 페이지로 이동할 수 있도록 코드를 수정합니다.

<template>
    <div class="order-form">
      <h2>주문하기</h2>
      <form @submit.prevent="submitOrder">
        <div>
          <label for="name">이름:</label>
          <input type="text" v-model="name" id="name" required />
        </div>
        <div>
          <label for="item">상품명:</label>
          <input type="text" v-model="item" id="item" required />
        </div>
        <div>
          <label for="quantity">수량:</label>
          <input type="number" v-model="quantity" id="quantity" min="1" required />
        </div>
        <button type="submit">주문 제출</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    name: "OrderForm",
    data() {
      return {
        name: "",
        item: "",
        quantity: 1,
      };
    },
    methods: {
      submitOrder() {
        // 여기서 서버로 데이터 전송은 내일 처리 예정
        this.$router.push("/confirmation");
      },
    },
  };
  </script>
  
  <style scoped>
  .order-form {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .order-form div {
    margin-bottom: 10px;
  }
  </style>

• submitOrder 메서드에서 this.$router.push("/confirmation")을 사용하여 주문이 제출되면 /confirmation 경로로 이동하게 했습니다.

7. 테스트하기

브라우저에서 http://localhost:5173로 이동하여 앱을 테스트해 보세요.

• 주문 폼에 정보를 입력하고 주문 제출을 클릭하면, 주문이 성공적으로 접수되었음을 알려주는 OrderConfirmation 페이지로 이동합니다.

8. 오늘의 마무리

오늘은 Vue 라우터를 사용해 페이지 간 이동을 구현했습니다. 이를 통해 사용자는 주문 폼에서 주문을 제출하면 주문 확인 페이지로 이동하여 주문 접수가 완료되었음을 확인할 수 있습니다.

내일은 백엔드 서버와 연동하여 실제로 주문 데이터를 전송하고 처리하는 작업을 시작하겠습니다!