vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15

Vue에서 v-router를 사용하여 다른 페이지로 이동하고 데이터를 전달하는 방법을 설명한다.

이 예제에서는 국회도서관 자료검색 화면을 개발하며 적용된 내용을 기반으로 설명한다.

 

✅ Vue Router란?

 

Vue Router는 Vue.js에서 페이지 간 이동(라우팅)을 담당하는 공식 라이브러리이다.

단일 페이지 애플리케이션(SPA)에서 원활한 네비게이션을 제공하며, 동적 라우팅 기능을 지원한다.

 

✅ Vue Router 설치

 

Vue CLI 프로젝트에서 Vue Router를 설치하려면 아래 명령어를 실행한다.

npm install vue-router

 

이전에 Vue Router와 Vuetify를 함께 설치하는 방법을 다뤘으니, 필요하면 참고한다.

📌 이전 글 보기

vue router, vuetify 설치하기 #13

 

✅ Vue CLI 프로젝트 구조

 

Vue Router를 적용하기 위해 기본적인 소스 구조를 정리한다.

 

📌 폴더 및 파일 구조

/src
 ├── assets/
 │    ├── index.js  → Vue Router 설정
 │    ├── api.js    → Axios API 통신 모듈
 │    ├── style.css → CSS 스타일
 ├── pages/
 │    ├── SearchMain.vue → 검색 메인 페이지
 │    ├── ResultList.vue → 검색 결과 리스트 페이지
 │    ├── ResultDtl.vue  → 상세 도서 정보 페이지
 ├── App.vue
 ├── main.js
 ├── .env → API URL 환경변수 파일

 

☞ 개발화면 기획은 이전 글 참고

국회도서관 자료 검색 vue.js 화면 스케치 #14

 

✅ Vue Router 적용하기

 

📍 1. index.html 설정

 

Vue CLI에서 기본으로 제공하는 index.html을 그대로 사용한다.

<div id="app"></div>

이 div에 Vue 앱이 마운트된다.

 

📍 2. main.js 설정

 

main.js에서 Vue Router를 불러오고 적용한다.

import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import router from "./assets/index"; // Vue Router 설정 파일 불러오기
import "./assets/style.css"; // CSS 파일 불러오기

Vue.config.productionTip = false;

new Vue({
  vuetify,
  render: (h) => h(App),
  router, // Vue Router 추가
}).$mount("#app");

 

📍 3. App.vue 설정

 

기본 내용을 지우고, Router View를 적용한다.

<template>
  <nav>
    <router-view />
  </nav>
</template>

 

📍 4. index.js - Vue Router 설정

 

라우팅 정보를 정의하는 index.js 파일을 생성한다.

import Vue from "vue";
import VueRouter from "vue-router";
import SearchMain from "../pages/SearchMain";
import ResultList from "../pages/ResultList";
import ResultDtl from "../pages/ResultDtl";

Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history", // Browser History 모드 사용
  routes: [
    { path: "/", name: "searchMain", component: SearchMain },
    { path: "/resultList/", name: "resultList", component: ResultList, props: true },
    { path: "/resultDtl", name: "resultDtl", component: ResultDtl, props: true },
  ],
});

export default router;

• mode: "history" : URL에서 # 없이 깔끔한 주소 사용
• props: true : 라우트에서 전달된 데이터를 props로 자동 전달

📍 5. SearchMain.vue - 검색 페이지

 

Vue Router를 사용하여 검색 결과 페이지로 이동하고 데이터를 전달한다.

<template>
  <div>
    <br>
    <h1><p v-bind:align="myAlign">국회 도서관 도서 검색</p></h1>
    <br>
    <p v-bind:align="myAlign">
      <input v-model="srhInp" v-on:keyup.enter="goToResults" type="text">
      &nbsp;<v-btn v-on:click="goToResults">검색</v-btn>
    </p>                 
  </div>   
</template>

<script>
import router from '../assets/index';

export default {
  data: function() {
    return {
      srhInp: "",
      myAlign: "center",
    };
  },
  methods: {
    goToResults: function() {
      if (this.srhInp.trim().length < 1) {
        return alert("검색어를 입력해주세요.");
      }
      router.push({
        name: "resultList",
        params: { srhs: this.srhInp }, // 검색어를 파라미터로 전달
      }).catch(() => {});
    },
  },
};
</script>

 

📌 설명

• router.push({ name: "resultList", params: { srhs: this.srhInp } })
  • 검색어 입력 후 resultList.vue 페이지로 이동
  • params를 이용하여 검색어 전달

✅ style.css - 기본 스타일 적용

 

Vue 프로젝트에서 스타일을 적용하기 위해 style.css를 추가한다.

html {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

input, button, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background-color .2s;
}

button:hover {
  background-color: darkgray;
}

input {
  padding: 6px 12px;
  border-radius: 6px;
  border: 2px solid #ced4da;
}

 

✅ 마무리

 

여기까지 Vue Router를 이용해 페이지를 이동하고 데이터를 전달하는 방법을 알아보았다.

 

✅ 정리

✔ Vue Router를 설치하고 index.js에서 설정

✔ main.js에서 router를 추가

✔ router-view를 사용해 동적 페이지 변경

✔ router.push()로 페이지 이동 및 데이터 전달

 

🔜 다음 글 예고

resultList.vue에서 외부 API를 호출하는 방법과 Axios 모듈 설치 및 적용을 다룬다.

 

☞ v-router 공식사이트 참고

Quick Start — Vuetify.js

 

☞ vue, vue cli 설치는 이전 글 참고

vue, vue cli 설치하고 버전 확인 #12