Vue Router 설정

라우팅이란?

• 클라이언트에서 url 주소에 따라 페이지가 전환 되는것
• Vue 프로젝트 내부에서 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해놓음

Vue-Rounter 설치

• vue 에서 제공하는 공식 플러그인 vue-router를 이용해 라우팅을 쉽게 구현 가능

kalva@RT-PC:~/vue-project$ vue add router
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

• @vue/cli-plugin-router 가 설치됨
  • src 폴더에 router, views 폴더와 파일이 생성됨

App.vue 파일

kalva@RT-PC:~/vue-project$ cat src/App.vue
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>
...

router/index.js 파일

kalva@RT-PC:~/vue-project$ cat src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

• routes 배열에 2개의 라우트가 등록되어 있다.
  • Home 컴포넌트
  • About 컴포넌트

  {
    path: '/',
    name: 'home',
    component: HomeView
  },

• path : 브라우저에서 접속하는 url 주소
• component : 지정된 path 로 접속했을때 보여줄 vue 컴포넌트
  • component: HomeView => import HomeView from '../views/HomeView.vue'

  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }

• // 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/AboutView.vue')
  • 라우트 레벨에서 코드를 분할한 후 별도의 chunk 파일을 생성하고, 이 라우트를 방문했을때 리소스를 로드함, 컴포넌트 import 시 /* webpackChunkName: "about" */ 라는 주석으로 chunk 파일 이름을 정의해서 chunk 파일은 about 이라는 이름으로 생성된다.
• 두가지 방식의 차이
  • 첫번째 : 사용자가 해당 path에 접근하지 않더라도 이미 vue 파일을 import
  • 두번째 : path에 접근해야 vue 파일을 import

Lazy Load 적용

Lazy Load

• 리소스를 컴포넌트 단위로 분리하여 컴포넌트, 라우터 단위로 필요한 것들만 다운 받을 수 있게 하는 방법

Vue 에서 Lazy Load 사용시 주의사항

• Vue CLI3 부터 prefetch 기능 추가됨
• prefetch 기능
  • 미래에 사용될수 있는 리소스를 캐시에 저장해서 사용자 접속시 빠르게 리소스 제공
  • 비동기 컴포넌트로 정의된 모든 리소스를 캐시에 담아두는 비용 발생
    • 분리된 chunk 파일 각각에 대한 request 가 발생, 각각의 파일을 다운로드 받아서 캐시에 저장함
  • prefetch 기능은 랜더링 시간을 줄여주는데, 잘못 사용시 랜더링 시간이 늘어남
  • Vue CLI 에서 prefetch 기능은 기본값으로 true 설정, Lazy Load가 적용된 컴포넌트는 모두 prefetch 기능이 적용되어 캐시에 저장됨
  • prefetch 기능 사용시
    • request 요청수 증가됨, 비동기 컴포넌트로 정의돈 모든 리소스를 캐시에 담기위해 Request 요청 수가 많아짐
    • 애플리케이션의 첫화면 접속시 랜더링 속도가 느려질 수 있음
      • 첫 화면에서 사용되는 리소스를 가장 나중에 다운받음, 다른 화면에 대한 리소스를 모두 내려받고 나서야 첫 화면에서 사용되는 리소스를 내려 받음
  • prefetch 기능 미사용시
    • 요청 수 prefetch 사용시보다 줄어듬
    • 라우터가 이동될 때마다 해당 라우터에서 필요한 리소스를 가져옴
      • 한번 가져온 리소스는 다시 요청하지 않음
  • 초기 랜더링은 prefetch 미사용시 더 빠르게 로딩됨
  • prefetch 기능은 다른 화면에서 사용될 리소스를 미리 내려 받아서, 애플리케이션에서 화면 전환시 빠른 성능을 가져온다는 장점을 이용하기 위해서 사용함
    • 필요한 컴포넌트에 대해서 prefetch 기능 적용 권장
  • 라우터를 통해 이동되는 컴포넌트에서 사용되는 리소스가 크지 않을 경우 prefetch 기능을 사용하지 않더라도 사용자 접속 시점에 다운받도 충분히 매끄럽게 동작함

prefetch 기능을 끄는 방법

• Vue.config.js 파일을 생성하고 다음 코드 추가

vi vue-project/vue.config.js
module.exports={
  chainWebpack: config=>{
    config.plugins.delete('prefetch'); //prefetch 삭제
  }
};

※ vue 가 업데이트 되면서 기본 값이 prefetch를 사용하지 않는것으로 변경됨

prefetch를 사용하고 싶은 경우

• 라우터에 webpachPrefetch:true를 넣어준다.

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

routes/index.js, main.js 파일

• routes/index.js 의 첫 번째 줄에는 라우팅을 처리하기 위해 vue-router를 import 한다.

# routes/index.js
import { createRouter, createWebHistory } from 'vue-router'

• 이렇게 정의된 router 는 main.js 에 등록해서 사용함

# main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

• import router from './router' 를 통해 router/index.js 파일이 import 됨
• createApp(App).use(router).mount('#app')
  • createApp(App) 최상위 컴포넌트인 App.vue 로 app를 생성하고, use(router) 코드를 추가하여 App.vue에서 router가 사용될 수 있도록 추가하고 App.vue 를 public 폴더의 index.html 에 정의되어 있는 id="app"인 htmlelement 에 마운트시킴

컴포넌트

• 조합하여 화면을 구성할 수 있는 블록