[Vue.js] Vue-router

- Vue-Router 설치

라우터를 추가할 해당 프로젝트로 이동하여 실행

vue add router

 

- router 샘플 파일

 

> App.vue

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

 

> 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라는 객체배열 변수에 {}로 객체를 담아서 연동할 컴포넌트에 대한 라우터를 설정함

path : 브라우저에 접속하는 url 주소 정의

component : 지정한 path로 들어왔을 때 보여줄 vue 컴포넌트 

 

- lazy-load : 리소스를 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요할 때 다운받을 수 있게 하는 방법

- prefetch : 사용될 수 있는 리소스를 캐시에 저장하여, 사용자가 접속했을 때 빠르게 리소스를 전달. 비동기 컴포넌트로정의된 모든 리소스를 캐시에 담기 때문에 request 요청 수가 많아져 느려질 수 있음

 

- prefetch 끄기

vue.config.js 파일 생성 후 해당 코드 작성

module.exports = {
    chainWebPack: config => {
        config.plugins.delete('prefetch');
    }
}

 prefetch기능이 필요한 경우, import 구문에 /* webpackPrefetch: true */ 작성