[Vue.js 3.x]Vue Router 설정

2021-10-01

Vue.js

Vue Router 설정

라우팅

특정 웹사이트 접속시 url 주소마다 다른 페이지
라우팅 : Client에서 url주소에 따라 다른 리소스 다른 페이지 전환
Vue같은 SPA의 경우 페이지 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라
클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신
Vue 프로젝트 내부에 미리 url 주소를 정의하고 각 주소마다 Vue 페이지 연결
Vue는 vue에서 제공하는 공식 플러그인인 vue-router를 이용해서 라우팅을 쉽게 구현

Vue-Router 설치

1	vue add router

디펜던시에 vue-router가 추가된다
개발 의존성에 @vue/cli-plugin-router가 추가된다

App.vue에 네비게이션 div가 추가되고 router-link가 추가되었다

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>

main.js에서 createApp(App).use(router).mount('#app')로 변겨오디었다

각 콤포넌트인 About, Home Vue 추가되고 router폴더에 index.js가 추가됨

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// routes 배열에 2개의 라우트가 연결되어 있음
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 라우트 레벨에서 코드를 분할한 후 이 route에 대한 별도의 chunk파일 생성
    // //밑에처럼 webpackChunkName 관련 주석으로 chunk파일 이름을 정의했으므로 about라는 이름으로 생성된다(about.[hash].js)
    // 이 라우트에 방문했을 때 지연 로드 : 실제 라우트 방문시 리소스 로드
    
    component: () => import(/* webpackChunkName: "about" */ '../views/  About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

routes 배열에 2개의 라우트가 연결되어 있음
path : 브라우저에서 접속하는 url 주소 정의
component : 지정된 path로 들어왔을때 보여줄 vue 컴포넌트
첫번째 라우트는 라우팅 없어도 vue파일을 import한다
2번째 라우트는 지연 로드로 path접근시에 리소스 import

Lazy Load 적용 (비동기 컴포넌트)

큰 프로젝트에서 패킹 되면 전체 소스 코드가 하나로 되면서 매우 커짐
사용자 첫 접속시 큰 파일을 다운로드 받느라 초기 렌더링 오래걸림
lazy load : 리소스를 컴포넌트 혹은 라우터 단위로 필요한 시점에 다운
내부적으로 Vue CLI의 prefetch기능이 사용되는 것
- Vue CLI3 부터 prefetch 기능 추가
- 미래에 사용될 리소스를 캐시 저장, 사용자가 접속했을때 굉장히 빠르게 리소스 다운
- 매우 유용하나 비동기로 정의된 모든 리소스를 캐시에 담는 비용이 발생
- 즉 별도로 분리된 chunk파일 각각에 대한 request가 발생하고 다운받아 캐시저장
- 렌더링 시간을 줄이기 위해 사용한 prefetch기능이 잘못하면 렌더링 시간이 증가되버림
많은 고민이 필요하다
- 초기 렌더링은 prefetch기능이 없어야 더 빨리 로딩됨
- 이동할 컴포넌트 리소스가 크면 라우터 이동시 화면전환이 늦으므로 prefetch 필요
- 각 컴포넌트별로 prefetch를 적용해서 캐시에 넣어서 사용할지, 아니면 prefetch 없이 사용자 접속 시점에 내려줄지 설계함에 따라 효율성 달라짐
- 접속 가능성이 높은 컴포넌트는 한 번에 다운로드 할 수 있게 설정 권장
- 접속 가능성이 낮은 컴포넌트는 prefetch 적용이나 , lazy-load 적용
- 운영 중에 계속 피드백을 통해 설정 개선이 필요

devfrontendVue.js

Vue Router 설정

라우팅

Vue-Router 설치

Lazy Load 적용 (비동기 컴포넌트)

Related POST