[VUE] vue-router 설치 및 사용하기 (router-view, router-link)

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 - vue-router: 4.1.3

 

 

1. npm 사이트로 이동하기(클릭)

# npm 설치
npm i vue-router

# yarn 설치
yarn add vue-router

 

 

2. router.js 생성하기

# 현재 router 폴더 생성 -> router.js 생성
./src/router/router.js

 

 

3. 이동 할 vue를 작성하기

# pages, users 폴더 생성, Main.vue, Users.vue 생성
./src/pages/Main.vue
./src/pages/users/Users.vue

 

 

4. 각 페이지에 간단한 문구 작성하기

Main.vue
Users.vue

 

 

5. router.js 작성하기

html5 모드에서 사용할 땐, createWebHistory()를 사용해야합니다.

프뚜의 기본 서버 host는 localhost이며, port는 8080입니다.

위 기준으로 http://localhost:8080/는 Main.vue가 import되고,

http://localhost:8080/users는 Users.vue가 import 됩니다.

 

 

6. App.vue에 router-view  태그 생성하기

# import된 페이지들이 보여질 태그 생성(공간)
<router-view />

 

 

7. path에 맞춰서 정상적으로 import 여부 확인하기

path에 맞춰서 정상적으로 vue를 import 됨을 확인할 수 있습니다.

 

 

8. router-link를 사용해서 화면 이동하기 (Main.vue, Users.vue)

# Main.vue에서 /users로 이동
<router-link to="/users">router 이동</router-link>

# Users.vue에서 /로 이동
<router-link to="/">router 이동</router-link>

 

9. router-link를 통하여 이동한 결과 확인하기

 

 

10-1. html a태그 vs router-link의 차이 (8번 소스 참고)

# Main.vue에서 /users로 이동
<a href="/users">a 태그 이동</a>

# Users.vue에서 /로 이동
<a href="/">a 태그 이동</a>

결과는 9번과 같이 정상 변경이 됩니다.

그럼 a태그로 이동하면 되는데 굳이 router를 사용하는 이유에 대해서 알아보도록 하겠습니다.

 

 

10-2. html a태그 vs router-link의 차이 (화면 리로딩 여부)

# router 사용
1. vue 전체 패키지를 다운로드합니다.
2. 받은 패키지 기준으로 화면을 이동합니다.

# a태그 사용
1. vue 전체 패키지를 다운로드합니다.
2. 1번과 같은 행위를 하며 화면을 이동합니다.

# 차이
1번의 내용은 같지만 2번의 내용은 다릅니다.
vue의 내용이 길어질수록 속도의 차이는 N배가 발생합니다.

처음 페이지가 뜰 때 vue의 기본 패키징을 load합니다.

router를 사용해서 이동하게 되면 처음 load한 기본 패키징을 통해 이동하기 때문에 다시 load하는 행위가 없습니다.

반면 a태그는 기본 패키징을 전체 load하는 행위가 이루어집니다.

 

 

해당 프로젝트는 gitlab에 제공되고 있습니다.

https://github.com/JeongSeongSoo/vue-tistory

GitHub - JeongSeongSoo/vue-tistory

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

 

소음 스트레스 해소!