반응형
0. 목적
-. 하나의 uri에 대해 각기 모듈화된 컴포넌트 여러개를 중첩해서 라우팅 해본다.
-. 지수 상세 정보에 news, interest 페이지를 추가해보자.
1. 컴포넌트 세분화 하기
-. 컴포넌트를 세분화 하는건 간단하게 이루어진다.
-. 기존에 StockDetail.vue 라는 컴포넌트를 사용했다면, 이걸 stock 폴더 내의 Detail.vue로 이동한다.
-. 그리고 router/index.js 파일의 import 부분을 수정해주면 끝난다.
기존: import StockDetail from '../views/StockDetail.vue'
변경: import StockDetail from '../views/stock/Detail.vue'
-. 결과를 보자.
2. 반복되는 코드 재사용하기 (children component)
-. template 상단의 navigation bar에 해당하는 html 스크립트가 중복된다. 이전에 jinja2로 간단하게 템플릿을 쓸 때에도 이부분은 재사용을 했었다. 재사용 하는 방법을 알아보자.
-. 그리고, navibar에서 각 항목을 누를 때 마다 화면 전체가 갱신되면서 트래픽이 발생한다. 이 부분을 줄여보자.
-. 중복되는 부분은 전부 지우고 기존에 페이지에서 다루는 지수의 이름 (idxNm)을 전달받던 props를 개별 지수 정보가 담겨있는 stockDetail로 변경하자.
<template>
<h5>{{ stockDetail.basDt }}</h5>
<h4>{{ stockDetail.clpr }} ({{ stockDetail.vs }}, {{ stockDetail.fltRt}}%) </h4>
</template>
<script>
import StockService from '@/services/StockService.js'
export default ({
// add props for dynamic routing
props: ['stockDetail']
})
</script>
-. children component 설정을 해주면 끝난다.
**기존**
{
path: '/stock/:idxNm',
name: 'StockDetail',
props: true,
component: StockDetail
},
{
path: '/stock/:idxNm/interest',
name: 'StockInterest',
props: true,
component: StockInterest
},
{
path: '/stock/:idxNm/news',
name: 'StockNews',
props: true,
component: StockNews
},
**변경**
{
path: '/stock/:idxNm',
name: 'StockLayout',
props: true,
component: StockLayout,
children: [
{
path: '',
name: 'StockDetail',
component: StockDetail
},
{
path: 'interest',
name: 'StockInterest',
component: StockInterest
},
{
path: 'news',
name: 'StockNews',
component: StockNews
},
]
},
-. 이제 화면 깜빡임 (재 로딩)이 없이, uri만 바뀌면서 내용이 전환되는 것이 확인된다.
-. 추가로, 각 페이지의 공통된 변수 (여기서는 idxNm)은 삭제해줘도 정상 작동한다.
-. 여기까지 작업한 깃헙 링크
728x90
반응형
'Web > vue.js' 카테고리의 다른 글
[vue.js] 코인시세 테이블 만들기 (2) 접히는(folding) 테이블 만들기 (0) | 2022.01.29 |
---|---|
[vue.js] 코인시세 테이블 그리기 (1) external javascript 사용하기 (0) | 2022.01.24 |
[vue.js] 페이지처리 (pagination) - 공공데이터 주가지수 페이지단위 호출 (0) | 2022.01.21 |
[vue.js] 동적 라우팅 - 공공데이터 지수 상세정보 (0) | 2022.01.20 |
[vue.js] axios 사용 및 data 처리 - 공공데이터 주가지수 가져오기 (0) | 2022.01.19 |
최근댓글