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

v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은

국회도서관 자료검색 화면을 개발하면서 적용한다.

vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-router를 적용한다.

 

☞ vue router 설치는 이전 글 참고

https://yuneenelife.tistory.com/entry/vue-router-vuetify-설치하기-13

vue router, vuetify 설치하기 #13

vue cli 소스 개발 순서

1. index.html
2. main.js
3. app.vue
   1. v-router template 코딩
4. ./assets/index.js
   1. v-router로 페이지 정보 코딩
5. ./pages/SearchMain.vue
   1. 검색 메인 페이지
   2. style.css 적용
6. .evn
   1. api url 모음 환경변수 파일 생성
   2. root 디렉토리에 생성
7. ./assets/api.js
   1. axios 모듈로 api 통신 로직 모음
8. ./pages/ResultList.vue : 검색결과 리스트
9. ./pages/ResultDtl.vue : 상세 도서 정보

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

https://yuneenelife.tistory.com/entry/국회도서관-자료-검색-vuejs-화면-스케치-14

 

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

• index.html
  • 기본으로 설치된 파일 그대로 사용
  • <div id=”app”></div> 부분을 그대로 사용할 예정
• main.js
  • v-router 정보 들어간 페이지 import
  • 별도 css 파일 import
  • Vue 생성 시 router 추가

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './assets/index' //v-router 정보
import "./assets/style.css" //별도 css 파일

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App),
  router
}).$mount('#app') //index.html 의 div id 값과 일치시킴

• app.vue
  • 기본 내용은 지우고 router 적용을 위한 코드로 변경

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

• ./assets/index.js
  • assets 폴더 안에 index.js 파일 생성
  • 페이지들 import
  • 페이지들의 router 적용

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 mode 사용
  routes: [
    { path: "/", name: 'searchMain', component: SearchMain },
    { path: "/resultList/", name: 'resultList', component: ResultList, props: true},    
    { path: "/resultDtl", name: 'resultDtl', component: ResultDtl, props: true },
  ] // path 별 페이지 component 추가
});

export default router;

• ./pages/SearchMain.vue
  • src 디렉토리 하위에 pages 폴더 신규 생성
  • 페이지들은 pages 폴더 하위에 생성
  • 페이지 호출 router.push({ … })
    • 파라미터 : params: { … }로 전달

<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>
//router 정보 import
import router from '../assets/index'

export default {
    data: function() {
        return {
            srhInp: '',  
            myAlign: 'center',
            vList: false,
            vDtl: false
        }
    },
    
    methods: {
        goToResults: function() {            
            //console.log("srhInp :", this.srhInp.trim().length);
            if (this.srhInp.trim().length < 1) {
                return alert("검색어를 입력해주세요.")
            }
            router.push({
                name: 'resultList', // routes path name in index.js
                params: { srhs: this.srhInp } // resultList 에 넘길 파라미터. props 로 넘어감             
            }).catch(() => {})
        }
    }
}
</script>

• ./assets/style.css
  • assets 폴더 안에 style.css 파일 생성
  • 해당 파일은 ./main.js 파일에 import 되어짐

@charset "UTF-8";
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;
    border: 2px;
    transition: background-color .2s;
}
button:hover {
    background-color: darkgray;
}
button:active {
    background-color: darkgray;
}
button:disabled {
    opacity: .5;
    pointer-events: none;
}
input {
    padding: 6px 12px;
    border-radius: 6px;
    color: #495057;
    border: 2px solid #ced4da;
}
textarea {
    width: 500px;
    height: 200px;
}
table {
    width: 100%;
    text-align: left;
}
table th {
    padding: 12px;
    border-bottom: 2px solid darkgray;
}
table td {
    padding: 12px;
}
table tr:nth-of-type(even) {
    background-color: rgb(234, 231, 231);
}
.underline {
    text-decoration-line: underline;
    cursor: pointer;
}
.modal-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
  /* modal or popup */
.modal-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}
.v-data-footer {
    display: flex;
    justify-content: flex-end;    
}
.v-data-table thead th {
    font-size: 15px !important;
    font-weight: 800;
}

※ 위 css 파일은 "백견불여일타 vue.js 입문" 책의 예제 참고

마무리

여기까지 국회도서관 자료검색 메인 페이지 완성되었고,

전체 페이지의 구조가 적용된 index.js 파일 생성되었다.

다음에는 검색결과 리스트(resultList.vue) 페이지에서 외부 API를 호출하기 위한 axios 모듈 설치 및 적용을 해보겠다.

 

☞ v-router 공식사이트 참고

https://v15.vuetifyjs.com/ko/getting-started/quick-start

 

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

https://yuneenelife.tistory.com/entry/vue-vue-cli-설치하고-버전-확인-12

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

 

☞ 국회도서관 자료검색 API 호출하는 django 설치는 이전 글 참고

https://yuneenelife.tistory.com/entry/API-Server-django-python-Framework-설치-1

API Server django python Framework 설치 #1