[Vue 프로젝트 03] 메뉴 구성(Router,Lazy Load)

# Vue Router 

클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다.

URL 변경시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소 영역만을 갱신

따라서 유연하게 페이지 전환이 가능한다. vue-router라는 라우팅 라우브러리를 지원한다.

1. Vue Router 설치

vue add router 명령어 설치

History router 부분도 Y로 설치

Vue Src 에 Router 폴더가 생성됨을 확인 할수 있습니다.

View 파일을 클릭시에는 About.vue파일이 생성됨을 확인 할수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

npm run serve 명령어로 서버를 실행시켜보겠음 about이 생김

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

router의 index.js 파일을 보면 rountes 안에 path,name,coponent 가 생김

import Home from '../views/Home.vue'  

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

about 은 component를 통해서 알려줌

path마다 컴포넌트를 연결해 줍니다.

main.js 파일로 가서 확인하면 router가 import되어있음을 확인 할수 있습니다.

createApp(App).use(router).mount('#app') 

use(router)부분이 생성됨을 확인

구분을 편리하게 하기 위해 main.js 파일을 수정 함 

const app = createApp(App)

app.use(router)

app.mount('#app')  //.mount index.html의 div id 를 mount(load) 시켜라 <div id="app"></div>

App.vue 의 파일

-------------------------------------------------------------------------------

# Lazy Load(비동기컴포넌트)

index.js 파일에서

 

 

1번째 방식을 사용하게 되면 개발자도구 Network화면상에서 app.js 안에서 모든 componet들이 실행되도록 할수 있음(모든 클라이언트가 내려져 있어야함)

2번째 방식을 사용하게 되면

(캐시에만 담겨져 있다가,클릭하는 순간에 그때야 비로소 클라이언트에 내려줌,화면전환이 빠름)