vue 라우팅

라우팅

미리 알아야 할 vue.js 개념 : vue는 single page Application(SPA) 즉, 단일페이지다.

사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 라우팅이라고 한다.

미리 url 주소를 정의하고 각 주소마다 vue 페이지를 연결해 놓는다.

설치 방법

1. CDN 방식

   <script src="/path/to/vue.js"></script>
   <script src="/path/to/vue-router.js"></script>

2. NPM 설치

   터미널에서 npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 이걸 통해 vue 파일 경로 참조
import VocView from '../views/voc/View.vue'
// 이걸 통해 vue 파일 경로 참조
import Test from '../views/voc/Test.vue'
import axios from 'axios'

// 라우터 인스턴스 생성
var router = new VueRouter({
  // 라우터 옵션
  mode: 'history',
  // path : 브라우저에서 접속하는 url 주소
  // component : 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트, 앞으로 구현할 vue 파일을 연결하고 해당 파일 실행
  routes: [
    { path: '/voc/view', component: VocView },
    { path: '/voc/test', component: Test}
  ]
})

3. 가장 최신 버전의 라우터를 사용하고 싶다면

   깃허브에서 직접 가져와 빌드하는 방법이 있다.

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router

cd node_modules/vue-router

npm install

npm run build

4. Vue 사용을 편리하게 해주는 Vue CLI 에서 다운 받는 방법이 있다.

   Vue add router (설치가 끝나면 src 폴더에 router와 views 폴더와 파일 생성)

   Npm run serve (서버 재시작)

   import{
     createRouter,
     createWebHistory
   }from'vue-router'
   import Home from'../views/Home.vue'
   
   constroutes=[{
       // 첫번째 방법은 사용자가 path에 접근하지 않더라도 이미 vue 파일을 import 시킴
       path: '/',
       name: 'Home',
       component: Home
     },
     {
      // 두번째 방법은 path에 접근하기 전까지는 vue 파일에 대한 import가 일어나지 않는다.
       path: '/about',
       name: 'About',
         
       // route level code-splitting
       // 라우트 레벨에서 코드를 분할하는 법
       // this generates a separate chunk (about.[hash].js) for this route 
       // 이 라우트에 대한 chunk 파일이 분리되어 생성
       // which is lazy-loaded when the route is visited.
       // 이 라우트에 방문했을 때 lazy-load(지연로드) 됩니다.
         
       component: ()=>import(/* webpackChunkName: "about" */'../views/About.vue')
     },
   ]
   
   constrouter=createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

Lazy Load (비동기 컴포넌트)

vue의 가장 큰 특징은

처음 접속하는 순간에 모든 자원들을 서버로부터 가져와 로딩한다는 점이다.

페이지를 이동하면 새롭게 모든걸 로딩하는게 아니라 변경이 필요한 부분만 바뀐다. (그래서 페이지 이동시 로딩이 빠름) 다만, 처음 접속할때 모든걸 가져와야해서 첫 접속때 느리다는 단점이 있다.

우리는 이러한 단점을 극복하기 위해 prefetch라는 기능을 시의적절하게 사용할 필요가 있다.

Lazy Load를 이용하여 리소스를 컴포넌트 단위로 분리하여 필요한 것들만 그때그때 라우트 단위 혹은 컴포넌트 단위로 다운로드할 수 있게 하자.

Lazy Load는 Lazy '가능한 길게 일을 미루는 행위'란 의미에 Load 단어를 합쳐 페이지 내에서 실제로 필요할 때까지 리소스 로딩을 미루는 것입니다.

Prefetch란?

미래에 사용될 수 있는 리소스(비동기 컴포넌트)를 캐시에 저장함으로써, 사용자가 접속했을 때 굉장히 빠르게 리소스를 내려줄 수 있다. (랜더링 시간 감소)

Lazy Load로 컴포넌트를 import 하면 내부적으로 Vue CLI의 prefetch 기능이 사용된다.

prefetch를 조절하는 방법은 3가지다.

• 전체 켜기 (디폴트 true)

• 전체 끄기

  // prefetch 기능 삭제
  Modul.exports = {
  	chainWebpack : config => {
  		Config.plugins.delete('prefetch');
  	}
  }

• 전체끄고 필요한것만 켜기 (권장)

  // 전체 끄기
  Modul.exports = {
  	chainWebpack : config => {
  		Config.plugins.delete('prefetch');
  	}
  }
  // 필요한 부분만 켜기
  import(/* webpackPrefetch: true */'../views/About.vue');

prefetch 적용 팁

• 사용자가 접속할 가능성이 높은 컴포넌트는 한 번에 다운로드할 수 있게 설정합니다.
• 사용자의 접속 빈도가 낮은 컴포넌트는 prefetch를 적용하거나 사용자 접속 시점에서 리소스를 다운로드하게 해서 전체 애플리케이션에 대한 리소스를 내려받는 시점을 분리합니다.