Vue 3 프로젝트에 Router 설정하기

목표

Vue 3 프로젝트에서 Router 설정하기

 

개발 환경

• Node: v18.13.0
• NPM: 8.19.3
• Vue CLI: v5.0.8

- 예시에서는 npm 패키지 매니저를 사용했습니다.

 

할 거 요약

 

1. Router 연결 테스트를 위한 테스트용 Component 생성하기
2. Vue 3 프로젝트에 vue-router npm 패키지 추가하기
3. Router의 Path와 Component의 맵핑 정보 담을 router.js 생성하기
4. router.js 파일이 전역에 동작할 수 있도록 최상위에 import 하기
5. router.js에 맵핑한 Path와 Component대로 페이지가 그려질 수 있도록 최상위 페이지에 적용하기
6. Router 적용 테스트

 

해보기

1. Router 연결 테스트를 위한 테스트용 Component 생성하기

• 생성 위치: Vue 프로젝트/src/components/TestComponent.vue

 

• TestComponent.vue 코드

<template>
  <div>
    <h2>Test Component</h2>
    Test Page
  </div>
</template>

<script>
export default {
  name: "TestComponent"
}
</script>

<style scoped>

</style>

 

---

2. Vue 3 프로젝트에 vue-router npm 패키지 추가하기

(npm이 아닌 yarn처럼 다른 패키지 매니저를 사용할 경우 해당 패키지 매니저의 vue-router를 추가해주면 됩니다.)

// vue-router 추가하기
// npm i는 npm install 이라는 뜻
npm i vue-router@next

// 설치는 되었는데, 반영이 안되는 듯 하면 아래 명령어를 실행해줍니다.
// package.json에 정의된 npm 패키지 의존성을 사용 가능하도록 설치해줍니다.
// 아래 명령어 실행 시, Vue 프로젝트/node_modules 폴더에 npm 패키지 의존성 파일들을 설치해줍니다.
npm install

 

★ vue-router가 잘 추가되었는지 확인하는 방법

• 확인 위치: Vue 프로젝트/package.json

package.json파일에 vue-router가 표시되면 잘 추가된 것입니다.

 

그리고, Vue 프로젝트/node_modules/vue-router 폴더가 존재해야 프로젝트에 잘 반영되어 사용 가능한 상태가 된 것입니다.

 

---

3. Router의 Path와 Component의 맵핑 정보 담을 router.js 생성하기

• 생성 위치: Vue 프로젝트/src/routers/router.js  (routers폴더 생성 후 아래에 router.js를 생성해줍니다.)

 

• routers/router.js 코드

import { createWebHistory, createRouter } from "vue-router";
import HelloWorld from "@/components/HelloWorld.vue";
import TestComponent from "@/components/TestComponent.vue";

const routes = [
    {
        path: "/",
        name: "HelloWorld",
        component: HelloWorld,
    },
    {
        path: "/test",  // TestComponent.vue로 이동할 Path
        name: "TestComponent",  // router name
        component: TestComponent,  // Path로 이동될 Component
    },
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

 

---

4. router.js 파일이 전역에 동작할 수 있도록 최상위에 import 하기

• 적용 위치: Vue 프로젝트/src/main.js

 

• main.js 코드

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


// createApp(App).mount('#app')  <-- Vue 프로젝트 생성 시 존재하는 기본 코드 제거

// 위 createApp 코드 아래처럼 변경
const app = createApp(App)
app.use(routers)  // router 추가
app.mount('#app')

 

---

5. router.js에 맵핑한 Path와 Component대로 페이지가 그려질 수 있도록 최상위 페이지에 적용하기

• 적용 위치: Vue 프로젝트/src/App.vue

 

• App.vue 코드

<template>
<!--  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>--> <!-- Vue 프로젝트 생성 시 존재하는 기본 코드 제거 -->

  <router-view /> <!-- router.js 맵핑된 view 적용 코드 추가 -->
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'  <-- Vue 프로젝트 생성 시 존재하는 기본 코드 제거

export default {
  name: 'App'
  /*components: {  <-- Vue 프로젝트 생성 시 존재하는 기본 코드 제거
    HelloWorld
  }*/
}
</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>

 

---

6. Router 적용 테스트

// vue project 실행
npm run server

// 접속 주소: http://localhost:8080/test

 

routes.js에 설정한 /test Path로 접속 시 TestComponent.vue 화면이 잘 그려지는것을 확인할 수 있습니다.

 

• 참고 링크: https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/

Vue Router: A Tutorial for Vue 3 | Vue Mastery