Vue-router 이해하기

Vue Router란 ?

Vue프레임워크에서 지원하는 라우팅 라이브러리를 의미한다.

라우터 설치

npm install vue-router --save

라우터 생성

1. src폴더 > router 폴더 생성
2. router폴더 > index.js 파일 생성

index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    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/About.vue')
  }
 ]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router)
app.mount('#app')

App.vue

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

위와 같이만해도 router의 기능은 문제없이 수행되지만 Vue의 라우터는 기본적으로 캐시에 저장되기 때문에 성능향상을 위해 아래와 같이 수정하여 prefetch를 삭제해준다면 더욱 효과적으로 router를 사용할 수 있을 것이다.

1. 파일 최상단에 vue.config.js 파일 생성

vue.config.js

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch'); //prefetch 삭제명령 = 캐시에 등록이 안되어있다가 화면에 접속시 캐시에 등록됨 = 속도 및 성능향상
  }
}

2. index.js에 webpackPrefetch: true 추가

index.js

  {
    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", webpackPrefetch: true */ '../views/About.vue')
  }