[vue.js] 중첩 라우팅 (nested routing)

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)은 삭제해줘도 정상 작동한다.

-. 여기까지 작업한 깃헙 링크