똑같은 삽질은 2번 하지 말자
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
app.js의 Response에는 Login Signup 내용들이 들어있다는걸 Response에 들어가면 확인할 수 있다.
즉, app.js에는 모든 페이지들의 정보들이 들어있다. 그러면 화면이 30개 100개가 되었을때? 다 들고오는데,
어마어마한 시간이 걸릴 수 있을니깐 그걸 해결할 수 있는게 코드 스플리팅이다.
https://webpack.js.org/guides/code-splitting/
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
초기 진입 페이지 설정
{
path: '/',
redirect: '/login', // 초기 진입 페이지 설정
},
'Vue' 카테고리의 다른 글
Vue.js 끝내기 No.6(회원가입 폼, API 호출,async await, ES6 백틱 Destructuring) (0) | 2020.05.16 |
---|---|
Vue.js 끝내기 No.5(Default Page, history mode 설정) (0) | 2020.05.14 |
ESLint + Prettier 연동 및 설정이 잘 안먹힐때, 파일의 절대경로 설정(jsconfig.json) (0) | 2020.05.09 |
Vue.js 끝내기 No.2(NVM, MongoDB Cloud) (0) | 2020.05.09 |
Vue.js 끝내기 No.1(Intro) (0) | 2020.05.07 |
Comments