Vue3에서는 Vue Router를 사용하여 SPA(Single Page Application)를 구현할 수 있습니다.
Vue Router는 여러 개의 컴포넌트를 페이지 단위로 관리하며, URL에 따라 적절한 컴포넌트를 렌더링하여 보여줍니다.

Vue Router 설치

Vue CLI를 사용하여 프로젝트를 생성할 때 Vue Router를 추가로 설치할 수 있습니다.
이미 생성된 프로젝트에 Vue Router를 추가하려면 다음 명령어를 실행합니다.

1

npm install vue-router

Vue Router 설정

vue router 설치가 완료되면, src 디렉토리 안에 router 디렉토리를 생성하고,
그 안에 index.js 파일을 생성하여 Vue Router를 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

Vue Router 사용

설정이 완료되면, 아래와 같이 main.js 파일에서 Vue Router를 import하여 Vue 애플리케이션에 추가합니다.

1
2
3
4
5

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

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

그리고 애플리케이션의 App.vue 파일에서컴포넌트를 사용하여 현재 경로에 해당하는 컴포넌트를 렌더링할 수 있습니다.

1
2
3
4
5

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

이렇게 Vue Router를 사용하면,
URL에 따라 다양한 컴포넌트를 렌더링하고,
사용자의 브라우징 이력을 관리할 수 있습니다.
이는 SPA에서 페이지 간의 이동을 구현하는 데 필수적인 기능입니다.

vue router params, dynamic route

디자인이 똑같은 페이지에서, 내용만 같은 경우가 있습니다.
예를 들어, 아래와 같이 게시판 같이 게시글 1/2/3의 내용은 다음과 같은 url을 가질 수 있습니다.
/board/1
/board/2
/board/3

이럴 때, url에서 param값을 받아들일 수 있도록 dynamic route를 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
 path:'/board/:id'
  }
]

vue router 페이지 이동, vue router 뒤로가기, vue router push

vue router에서 페이지 이동을 하는 방법은 아래와 같이,
컴포넌트에서 router-link 태그를 이용하면 페이지 이동을 하는 요소를 만들어 줍니다.

1

<router-link :to="...">

programatical하게 페이지 이동을 하려면 router의 push/replace/go 메소드를 사용하면 됩니다.

push : URL 이동. 히스토리 스택에 추가
replace : URL 이동. 현재 페이지를 대체하므로 히스토리 스택에 추가되지 않음.
go : 히스토리 이동. 숫자만큼 앞, 뒤로 가기

예제코드는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11

import { useRouter} from 'vue-router'

export default {
  setup() {
    const router = useRouter();{
 router.push('home'); //home 페이지로 이동합니다. 
 router.replace('home'); //hoe 페이지로 대체합니다.
 reouter.go(-1); // 이전 페이지로 이동합니다.(뒤로가기)
  },
}

vue router push 데이터 전달

vue router push (페이지 이동) 화면에서 데이터 전달하는 방법은 아래와 같이 params나 query를 쓸 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import { useRouter} from 'vue-router'

export default {
  setup() {
    const router = useRouter();{
 
 router.push({ name: 'user', params: { userId: 321 }})
 
 // 아래는 /user?userId=211 와 같이 쿼리 파라미터가 붙어 이동됩니다. 
 router.push({ path: 'user', query: { userId: '211' }})
  },
}

#javascript, #vue, #vue3, #router