[vue.js] Vue Router 설정

url 주소와 vue 파일 매칭하는 방법

① src/router 파일의 index.js에서 설정 정의(routes > path, name, component)

② main.js에서 라우터를 애플리케이션에 등록

 

1. 라우팅

- 클라이언트에서 url 주소에 따라 페이지가 전환되는 것.

- 주소마다 vue 페이지를 연결한다.

 

2. Vue-Router 설치

명령어 입력

vue add router

 

히스토리 사용 여부를 묻는 질문이 나오면 Y 입력

 

 

3. 라우터를 설치하면서 추가된 파일

1)App.vue

vue-project/src/App.vue

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

<nav>에 주소 설정되어있음

 

2) vue-project/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

 

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

component: 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트와 앞으로 구현할 vue 파일 연결, 해당 파일 실행

 

import HomeView from '../views/HomeView.vue' → src/views 폴더의 Home.vue 파일 참조

 

 

3) main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 라우터 설정 가져오기

createApp(App)
  .use(router)                 // 라우터를 애플리케이션에 등록
  .mount('#app')

 

import { createApp} from 'vue': vue 패키지에서 createApp 함수를 가져옴

import App from './App.vue' 애플리케이션의 루트 컴포넌트인 App.vue 파일을 가져옴

import router from './router': 라우터 설정을 정의한 router 파일을 가져옴

 

4. Lazy Load(비동기 컴포넌트)

리소스를 컴포넌트 단위로 분리, 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때그때 다운로드하게 함

1) prefetch

- 미래에 사용될 수 있는 리소스(about과 같은 비동기 컴포넌트)를 캐시에 저장, 사용자가 접속했을 때 리소스를 빠르게 다운로드

(1) 장점

- 첫 로드 이후 페이지 전환이 빨라짐

(2) 단점

- 비동기 컴포넌트로 정의된 리소스라면 사용하지 않더라도 캐시에 담게 됨

- 애플리케이션 첫 화면 접속시 랜더링 속도가 느려질 수 있음

- 첫 화면에서 사용되는 리소스를 가장 나중에 다운로드

- request 요청 건수 추가(서버와의 통신 수 증가, 내려받는 리소스 크기 커짐)

(3) 특징

- Vue CLI에서 prefetch 기능은 기본값으로 true 설정

  → Lazy Load가 적용된 컴포넌트는 모두 prefetch 기능이 적용되어 캐시에 저장됨

 

2)prefetch 끄기

vue.config.js 파일에 chainWebpack 코드 추가

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugins.delete('prefetch')
  }
})