router 설정 및 사용

Vue Router를 사용하여 여러 페이지를 다루고 각 페이지에 주소를 지정하는 방법입니다.

 

router 설정

1. Vue Router 설치

- Vue 프로젝트에 Vue Router를 설치합니다.

npm install vue-router

 

- 버전 확인

#Vue 2.x와 vue-router 3.x
npm install vue-router@3

#Vue 3.x와 vue-router 4.x
npm install vue-router@4

 

2. Vue Router 설정

- index.js (2024.11 수정함)

Vue Router를 설정하려면 src 폴더에 router 폴더를 생성하고 그 안에 index.js 파일을 만듭니다.  

import { createRouter, createWebHistory } from 'vue-router';  // Vue 3.x의 새로운 라우터 사용법
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about/:id',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),  // Vue 3.x에서 새로운 history 모드 사용
  routes,
});

export default router;

 

* vue 2.x 및 3 초기

 

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue' // Home은 실제 컴포넌트 이름에 맞게 수정해야 합니다.
import About from '@/views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  // 다른 페이지를 추가
]

const router = new VueRouter({
  routes,
})

export default router

 

- main.js

import { createApp } from 'vue';  // createApp 사용 (Vue 3.x)
import App from './App.vue';
import router from './router';  // 라우터 임포트

createApp(App)
  .use(router)  // Vue 3.x에서 라우터 사용 설정
  .mount('#app');

 

** vue 2.x

import Vue from 'vue';
import App from './App.vue';
import router from './router';  // 라우터 임포트

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,  // 라우터 추가
}).$mount('#app');

 

3. 페이지 컴포넌트 생성

src/views 폴더에 각 페이지에 해당하는 컴포넌트를 만듭니다. 예를 들어, Home.vue라는 파일을 만들 수 있습니다.

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>홈 페이지</h1>
    <!-- 내용 -->
  </div>
</template>

<script>
export default {
  // 컴포넌트 로직
}
</script>

 

4. App.vue 수정

App.vue에서 router-view 컴포넌트를 추가하여 페이지 컴포넌트가 표시되는 위치를 지정합니다.

 

- 변경 전

<template>
  <Home/>
</template>

<script>
import Home from './views/Home.vue'

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

 

- 변경 후

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // 앱 전체 로직
}
</script>

 

router 사용

1. 라우터 링크 사용

이제 페이지 간 전환을 위해 라우터 링크를 사용할 수 있습니다. 예를 들어, 메뉴 항목을 클릭하여 다른 페이지로 이동하려면 다음과 같이 router-link를 사용합니다.

<router-link to="/">홈</router-link>
<router-link to="/about">소개</router-link>

 

이제 여러 페이지를 가진 Vue.js 앱을 만들었습니다. 페이지 간 이동은 router-link를 사용하여 수행할 수 있으며, 각 페이지는 고유한 주소를 가집니다. 페이지 컴포넌트에서 페이지의 내용을 구성하고 페이지 간 이동을 관리할 수 있습니다.

 

2. router.push

- index.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/About/:id',
    name: 'About',
    component: About,
    props: route => ({
      id: route.params.id,
      data: JSON.parse(route.query.data || "{}"),
    }),
  },
]

 

- 보내는 쪽에서

goToAbout(data) {
      this.$router.push({
        name: "About",
        params: { id: data.id }, //url 경로
        query: { data: JSON.stringify(data) },
      });
    },

 

- 받는 쪽에서

 props: {
    data: {
      type: Object,
      default: () => ({
        name: "",
        info: "",
      }),
    },
  },

 

*script setup 스타일

<script setup>
  import { useRouter, useRoute } from 'vue-router';

  const router = useRouter(); // 라우터 인스턴스(라우팅 관련 동작을 수행)
  const route = useRoute(); //현재 라우트(활성화된 URL에 대한 세부 정보)
  
  const id = route.params.id;
  const data = route.query.data;
  
  const goToPage2 = () => {
      router.push({
      name: "Page2",
      query: { data: "something" },
    });
  };
 
</script>