2020.01.13 오늘의 커밋. Vue Router를 이용한 동적 메뉴 구현

오늘의 요건을 1줄로 요약하면 아래와 같다.

개발자들이 테스트하고있는 각각의 Vue 화면을 라우터에 등록하여 하나의 메뉴 페이지에서 모든 테스트 페이지에 접근할 수 있도록 할 것이다.

 

 

오늘의 요건 처리결과 이러한 화면이 나와야 한다.

 

 

처리 순서는 아래와 같다.

1. Vue router에 전달받은 메뉴 데이터를 동적으로 import한다.

2. 메뉴 페이지에서 동일한 메뉴 데이터를 받아 화면에 뿌린다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 메뉴 데이터 클래스를 생성한다.

나중에는 서버에서 메뉴를 가져올것이다.

 

 

 

2. main.js에서 Vue Router 공식 홈페이지에 나와있는 순서대로 로직을 작성한다.

 

 

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from 'vue-router'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

import {Menu} from './components/menu/menu'
// 0. 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import
// 그리고 `Vue.use(VueRouter)`를 호출
Vue.use(VueApollo)
Vue.use(VueRouter)
Vue.config.productionTip = false



const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000'
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

 

Vue에서 쓸 컴포넌트들을 싹다 정의한다 라우터만 쓸거면 위에거 다 무시하고 vue-router만 쓰면 된다.

 

 

// 1. 라우트 컴포넌트 경로 및 실제 파일 경로 json으로 생성
let menu = new Menu()
// const menuJSON = menu.menuJSON
// console.log(menuJSON)
// 2. 라우트 정의
// 각 라우트는 반드시 컴포넌트와 매핑되어야 함.
// "component"는 `Vue.extend()`를 통해 만들어진
// 실제 컴포넌트 생성자이거나 컴포넌트 옵션 객체여야함.
const menuJSON = menu.menuJSON;
async function load(){
  const routes=[]
  
  //ncrm처럼 json을 받아 직접 컨버팅함
  menuJSON.forEach(element => {
    routes.push(
    {
      path:element.path,
      component:() => import(`${element.component}`)
    }
    )
  });
  // 3. `routes` 옵션과 함께 router 인스턴스 생성.
  // 추가 옵션을 여기서 전달
  const router = new VueRouter({
    routes // `routes: routes`의 줄임
  })

 

라우터 컴포넌트를 비동기 처리 함수에서 import한 json클래스를 통해 생성하고, 동적 import 한다.

  

  // 4. 루트 인스턴스를 만들고 mount
  
  // router와 router 옵션을 전체 앱에 주입.
  new Vue({
    vuetify,
    apolloProvider,
    router,
    render: h => h(App)
  }).$mount('#app')
}
load();

인스턴스 생성 후 함수를 종료, 호출한다.