Vue.js 끝내기 No.4(Vue Router,Code Splitting)

Vue Router 설치

$ npm install vue-router --save

import Vue from 'vue';
import VueRouter from 'vue-router';
import LoginPage from '@/views/LoginPage.vue';
import SignupPage from '@/views/SignupPage.vue';

Vue.use(VueRouter); // plugin을 실행하기 위해 초기화하는 코드

// 외부에서 사용할 수 있게 모듈화
// default 는 하나만 내보내겠다 는 의미
export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: LoginPage,
    },
    {
      path: '/signup',
      component: SignupPage,
    },
  ],
});

<template>
  <div>
    <header>
      <router-link to="/login">로그인</router-link>||
      <router-link to="/signup">회원가입</router-link>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style></style>

코드 스플리팅?

설명에 앞서 싱글 페이지 애플리케이션은 페이지가 바뀌어도 네트워크 패널을 보면 아무런 변화가 없다.

일반적인 페이지는 페이지를 이동할 때 마다 서버로 가서 해당 html을 받아와서 페이지 전환이 일어나는데,

Single Page Application은 원도우 히스토리 API를 이용해서 URL을 컨트롤 한다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/history

Window.history

 

app.js의 Response에는 Login Signup 내용들이 들어있다는걸 Response에 들어가면 확인할 수 있다.

 

 

즉, app.js에는 모든 페이지들의 정보들이 들어있다. 그러면 화면이 30개 100개가 되었을때? 다 들고오는데,

어마어마한 시간이 걸릴 수 있을니깐 그걸 해결할 수 있는게 코드 스플리팅이다.

https://webpack.js.org/guides/code-splitting/

Code Splitting | webpack

 

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // plugin을 실행하기 위해 초기화하는 코드

// 외부에서 사용할 수 있게 모듈화
// default 는 하나만 내보내겠다 는 의미
export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/LoginPage.vue'),// login에 해당하는 페이지만 들고온다.
    },
    {
      path: '/signup',
      component: () => import('@/views/SignupPage.vue'),
    },
  ],
});

이렇게 하면 페이지 이동했을때, 네트워크 패널에 아마 1.js라는게 로딩되어 있을껀데, 내용을 보면

해당페이지의 내용이 들어있다.

https://vuejs.org/v2/guide/components-dynamic-async.html#ad

Dynamic & Async Components — Vue.js

 

초기 진입 페이지 설정

{
  path: '/',
  redirect: '/login', // 초기 진입 페이지 설정
},