[VueJS] 뷰 라우터(Vue Router) 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. router-view)

VueJS의 주요 기능 중 하나인 뷰 라우터(vue-router)에 대해 알아보자.

뷰 라우터는 뷰 라이브러리를 이용하여 SPA를 구현할 때 사용하는 라이브러리인데, 페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다.

 

그렇기 때문에 페이지를 이동할 때 url이 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신해주는 역할을 한다.

(DOM을 새로 갱신하는게 아니라 SPA의 특징대로 컴포넌트만 갱신해서 화면에 보여주는 것이다.)

 

simpleVue 실습을 따라가면서 한번 익혀보도록 하자.

---

일단 vue-router를 설치해줘야한다. 아래 명령어를 통해 설치해주도록 하자.

npm i --save vue-router

 

자 설치가 완료됐다면 이제 라우터에 사용할 router.js라는 파일을 추가해 사용해볼텐데, 일반적인 router 폴더트리 구조를 따라가서 생성해주도록 하자. (회사별, 사업 규모별 구조와 파일명은 언제든지 달라질 수 있으나 일단 기본적인 기능에 대해서만 익혀보자.)

 

▷ 폴더 구조

- router
   └ router.js
- App.vue
- main.js

 

▷ router.js

import { createWebHistory, createRouter } from "vue-router";

const router = createRouter({
    history : createWebHistory(),
    routes : [ // path별 component를 추가한다.
        { path : "/", name : "", component : "" },
    ]
});

export default router;

 

이제 router 기본 구조와 설정은 완료되었고

이제 좀 더 살을 붙여서 실제로 사용해보도록 해보자.

 

루트인 "/" path로 들어올때는 main페이지로 들어가게, 그 외에 나머지는 ErrorPage로 들어가도록 만들어보자.

 

▷ Home.vue

<template>
  <div>
      <h1>Home Page</h1>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

 

▷ ErrorPage.vue

<template>
  <div>
      <h1>Error Page</h1>
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

 

▷ router.js

import { createWebHistory, createRouter } from "vue-router";
import ErrorPage from "@/components/ErrorPage"
import Home from "@/components/Home"

const router = createRouter({
    history : createWebHistory(),
    routes : [ // path별 component를 추가한다.
        { path : "/", name : "home", component : Home },
        {
            path : "/:pathMatch(.*)",
            name : "not-found",
            component : ErrorPage
        }
    ]
});

export default router;

 

▷ main.js

main.js는 처음에 기본적으로 존재하던 파일이라 알고있을텐데 여기서 라우터를 사용하겠다 세팅을 해줘야한다.

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

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

 

▷ App.vue

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>

 

▶ 결과

---

아래에 주어진 참고 url simplevue를 따라하면서 굉장히 많은 에러가 발생하는데,

아무래도 버전 문제인거같더라 저 참고 url simplevue 홈페이지는 vue2 버전을 대상으로 하는듯 하고 나는 vue3버전을 기반으로 만들다 보니까 많은 에러가 발생한다...

 

저 홈페이지 코드는 따라하면 안되겠다.

 

 

---

참고 : https://simplevue.gitbook.io/intro/08.-router

08. Router - simpleVue