Vue Router 4

Vue Router 4

이 문서에서는 Vue-cli 3 프로젝트에 Vue Router 4를 추가하는 방법에 대해서 다룬다.

Vue Routerrouter.vuejs.org

Vue Router란

Vue의 공식 라우터로 주소에 따라 다른 화면이 보일 수 있도록 처리하는 도구이다. SPA를 구축하기 위해 프론트엔드에서 주소를 인식하고 처리할 수 있도록 모든 작업을 지원한다.

Vue Routerrouter.vuejs.org

의존성 설치

https://www.npmjs.com/package/vue-router/v/nextwww.npmjs.com

npm

npm install vue-router@4

yarn

yarn add vue-router@4

Vue Router 설정 파일

설정 파일은 어디에 두어도 상관없으나 대형 프로젝트에서 관리 편의를 위해 각자 기능에 맞게 폴더를 만들고 index.js 파일에 작성한다.

파일 이름을 index.js로 작성하는 이유

import에서 해당 파일 이름을 생략할 수 있다. 다음 둘은 같은 코드이다.

import router from "./router";
import router from "./router/index.js";

/src/router/index.js

import {createWebHashHistory, createRouter} from 'vue-router';

const router = createRouter({
    history:createWebHashHistory(),
    routes:[]
});

export default router;

Vue-router 설정을 main.js 파일로 불러와서 Vue Application에 등록 처리한다.

/src/main.js

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

//router 설정 불러오기
import router from "./router";

createApp(App)
    .use(router)//router 사용 설정
    .mount('#app')

Vue Router를 사용하기 위한 기본 준비는 마쳤다. 이제 화면을 만들면서 본격적인 라우팅이 이루어질 수 있도록 추가하는 작업이 남아있다.

Routing Component 구현

/src/components 안에 다음 두 개의 파일을 생성한다.

• /src/components/FirstScreen.vue

• /src/components/SecondScreen.vue

Tip

파일 이름은 multi-word 형태로 작성해야 한다.

FirstScreen.vue

<template>
    <div>
        <h1>First Screen</h1>
    </div>
</template>
<script>
    export default {
        name:"FirstScreen"
    }
</script>
<style scoped>

</style>

SecondScreen.vue

<template>
    <div>
        <h1>Second Screen</h1>
    </div>
</template>
<script>
    export default {
        name:"SecondScreen"
    }
</script>
<style scoped>

</style>

각 파일의 내용은 구분을 위해 화면에 표시되는 글자와 이름을 다르게 설정하였다. 이 컴포넌트들을 Vue Router에 등록한다.

/src/router/index.js

import {createWebHashHistory, createRouter} from 'vue-router';

//주소와 연결할 컴포넌트를 불러온다
import FirstScreenVue from "@/components/FirstScreen.vue";
import SecondScreenVue from "@/components/SecondScreen.vue";

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        //기본 주소(/) 요청이 올 경우 FirstScreenVue로 연결한다
        {path:"/first", component:FirstScreenVue},
        //second 주소 요청이 올 경우 SecondScreenVue로 연결한다
        {path:"/second", component:SecondScreenVue},
    ]
});

export default router;

import 키워드로 만들어진 Vue Component를 불러오고, routes 내부에 객체 형태로 경로(path)와 컴포넌트(component)를 설정하면 기본 라우팅 설정이 완료된다.

routes 설정 시 주의사항

애플리케이션이 최초로 실행되면 기본 주소인 / 화면이 불러지므로 / 에 대한 routes 설정은 반드시 필요하다.

Router View 생성

최초 생성 시 만들어져 있던 HelloWorld.vue 파일을 제거한다.

• /src/components/HelloWorld.vue

App.vue의 내용을 다음과 같이 작성한다.

/src/App.vue

<template>
  <img alt="Vue logo" src="@/assets/logo.png">

  <hr>
  
  <router-link to="/">first screen</router-link>
  &nbsp;&nbsp;&nbsp;
  <router-link to="/second">second screen</router-link>

  <hr>

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

<script>
export default {
  name: 'App',
  components: {
    
  },
}
</script>

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

<router-link>는 Vue router에게 요청을 전달할 수 있는 링크이다. <router-view> 는 현재 주소에 따라 Vue router에서 제공하는 컴포넌트가 출력될 영역이다. 따라서 <router-link> 를 누르면 <router-view>의 화면이 변경되는 것을 확인할 수 있다.

실행 결과