본문 바로가기
WEB/Vue.js

[Vue.js] 라우터 이해하기

by Raymond 2022. 7. 7.

Vue 라우터란?

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다.

라우팅이란?
웹 페이지의 이동 방법을 말합니다. 라우팅은 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용되고 화면 간의 전환을 매끄럽게 진행시킬 수 있습니다.

 

Vue 라우터에 사용되는 태그

아래의 예제에서는 App.vue 파일에서 사용이 됩니다.

 

</router-link to="url값">  페이지 이동 태그, 화면에선 a 태그로 치환
<router-view>  페이지 표시 태그 , 변경된 URL에 따라 해당 컴포넌트를 뿌려주는 영역

 

폴더 구조

project
|--public
|    |--index.html
|--src
    |--router
    |    |--index.js
    |--App.vue
    |--main.js

 

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 

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') //public/index.html의 id가 app인 부분을 mount한다는 의미

 

라우터에 컴포넌트 연결 방법 2가지

 

1. 코드 상단에 .vue파일을 import 하여 그 변수를 component에 넣는 방법

  • path : router-link와 같은 태그로 접근할 path를 정의합니다.
  • name : router가 많아지면 복잡해지는데 name값을 통해서 접근이 가능합니다. 유일한 값
  • component : vue로 되어있는 파일들이 각각이 컴포넌트인데 어떤 컴포넌트를 연결해줄지 정의한다.

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
// 방법1
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]

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

export default router

 

2. 화살표 함수를 통해서 component 안에서 import 하는 방법

주석으로 처리된 webpackChunkName으로 정의된 이름의 js파일로 필요시에만 다운을 하여 사용이 되는 js파일로 사용이 되는  방법과 webpackChunkName + webpackPrefetch를 넣어 캐시에 미리 js파일을 받는 방법이 있습니다.(아래 글 참조)

router/index.js

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

const routes = [
  {
   // 방법 2
    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

 

about 메뉴 클릭시 개발도구를 통해 본 js파일

  • chunk-vendors.js : 프로젝트를 만드는데 필요했던 외부 모듈들이 들어있는 js파일
  • app.js : 라우터에 컴포넌트 연결방법에서 1번의 방법으로 vue파일을 import 한 경우에는 app.js파일로 만들어져 들어간다. 만약 100개의 컴포넌트 연결을 1번의 방법으로 했을 경우 모든 컴포넌트는 app.js에 다 들어가게 되어 파일이 커지게 된다.
  • about.js : webpackChunkName으로 정의된 이름으로 만들어진 js파일로 vue를 js파일로 변환한 component

webpackChunkName + webpackPrefetch

 

router/index.js에서 component의 주석부분에 보면 아래 코드와 같이 두 가지(webpackChunkName, webpackPrefetch)를 주석으로 설정할 수 있습니다. webpackChunkName 단독 사용과 webpackChunkName + webpackPrefetch의 가장 큰 차이점으로는 메뉴를 클릭해서 들어가는 경우에 개별 js파일로 다운로드할지 페이지가 로딩될 때 미리  js파일을 캐시에 받아두는지를 정하는 차이가 있습니다.

 

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

 

 홈화면에서 개발자 도구의 Elements텝을 보면 를 보면 당장은 사용하지 않지만 자주 사용자가 들어가는 페이지와 같은 링크의. js파일을 미리 서버에서 받아 캐시에 저장을 하게 됩니다.(ex. 네이버 뉴스, 웹툰..) 사용자가 들어가지 않는 페이지를 webpackPrefetch설정을 하게 되면 리소스 낭비이기도 하고 용량이 크다면 초기화면의 로딩이 느려지는 단점이 있으므로 적절하게 라우터를 설계하여 사용을 하여야 합니다.

Home화면의 header 테그 안에 미리 만들어진 js파일이 있음을 볼 수 있다.
webpackPrefetch 사용시 홈화면

 

라우트 설계시 고려 사항

app.js의 사용이 고려되는 경우
vue로 개발되어 app.js로 초기에 들어오는 파일인 경우

webpackChunkName의 사용이 고려되는 경우
사이즈가 작아서 메뉴를 클릭하는 순간에 받아와도 문제가 안 되는 경우 또는 사용자가 방문이 작은 경우
ex) 하나의 webpackChunkName으로 여러 라우터를 구성한 경우는 특정 라우터를 통해 들어간 페이지에서 들어갈 확률이 높은 페이지면 webpackChunkName 이름을 묶어서 한꺼번에 받아올 수 있습니다.

webpackChunkName + webpackPrefetch의 사용이 고려되는 경우
페이지가 사이즈가 커서 접속하는 순간 받으면 느려질 가능성이 높은 거나 사용자가 방문할 가능성이 높은 경우

router-link 사용법

router/index.js파일에서 path의 값과 App.vue파일의 router-link태그의 to의 값이 같은 오브젝트를 찾아 연결된 해당 컴포넌트로 이동 역할 페이지 이동 태그, 화면에서는 <a>로 렌더링 되며, 클릭하면 to에 지정한 URL로 이동

 

App.vue

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

 

router-view 사용법

페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 화면에 그려지는 영역. 개발자 도구에서 보이지 않는다.

주소에 http://localhost:8080/databinding/string과 같이 주소에 접근을 하게 되면 해당 path의 경로를 가진 라우터를 통해서 컴포넌트에 연결이 되어 해당 컴포넌트가 <router-view>가 있는 영역에 들어가게 됩니다.

 

App.vue

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

 

router-view가 보여주는 부분, router-link가 찾아가게 해주는 부분이라고 생각하면 됩니다.

'WEB > Vue.js' 카테고리의 다른 글

[Vue.js] 이벤트  (0) 2022.07.10
[Vue.js] 데이터 바인딩  (0) 2022.07.09
[Vue.js] Vue 프로젝트 생성  (0) 2022.06.28
[Vue.js] Vue CLI & 기본 구조 이해하기  (0) 2022.06.27
[Vue.js] Vue.js란?  (0) 2022.06.26

관련글

댓글

​

티스토리툴바