[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(3) - vue-router 설정하기

지난 포스팅까지 해서 뷰 개발환경을 세팅하고, 게시판 목록 컴포넌트와 게시글 작성 컴포넌트를 생성했다.

 

이번 포스팅에서는 index화면(초기화면)을 목록 화면으로 설정하고, '글쓰기' 버튼을 생성하여 게시글 작성 화면으로 이동할 수 있는 vue-router 기능을 구현하도록 하겠다.

 

먼저 vue-router 설치

터미널을 열어 아래 명령어를 입력한다.

 

npm i vue-router

 

만약 vue-router 버전이 4 미만으로 설치가 되는 경우, 아래 명령어로 실행한다.

Vue3부터는 Router 4 버전을 사용해야 한다.

 

npm i vue-router@next

 

설치가 완료되면 src/router.ts 파일을 생성하고, 아래 코드 작성

 

import { createRouter, createWebHashHistory } from 'vue-router'
import BoardList from './components/BoardList.vue';
import BoardWrite from './components/BoardWrite.vue';

const routes = [
    { path: '/', component: BoardList },
    { path: '/write', component: BoardWrite },
]

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

export default router

 

App.vue 컴포넌트 template 수정

 

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

<script lang="ts" setup>
</script>

 

마지막으로 main.ts에서 router 사용하도록 설정

 

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

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

 

서비스를 실행한 후 아래 URL을 각각 입력해보자.

 

http://localhost:8080/#/
http://localhost:8080/#/write

 

그럼 목록 화면과 작성 화면이 각각 뜨는 것을 확인할 수 있다.

 

그럼 목록 화면에 버튼을 추가하여 이동할 수 있도록 설정해보자.

 

BoardList.vue 컴포넌트의 v-table 하단에 아래 코드 추가

 

<v-btn color="secondary">글쓰기</v-btn>

 

그리고 BoardWrite.vue 컴포넌트 v-form 하단에 아래 코드 추가

 

<v-btn color="secondary">뒤로가기</v-btn>

 

 

이쁘진 않지만 일단 완성

 

마지막으로 버튼 이벤트를 추가한다.

먼저 BoardList.vue의 버튼 부분에 이벤트를 걸어주고, script를 수정한다.

 

<v-btn color="secondary" @click="onClickWrite">글쓰기</v-btn>

 

composition api에서 router.push를 사용하는 방법은 아래 코드를 사용하면 된다.

 

BoardList.vue

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const list = [
    { id: 1, title: '첫 번째 게시글', writer: 'artistjay' },
    { id: 2, title: '두 번째 게시글', writer: 'artistjay' },
    { id: 3, title: '세 번째 게시글', writer: 'artistjay' },
    { id: 4, title: '네 번째 게시글', writer: 'artistjay' },
    { id: 5, title: '다섯 번째 게시글', writer: 'artistjay' },
    { id: 6, title: '여섯 번째 게시글', writer: 'artistjay' },
]

const router = useRouter()

function onClickWrite() {
    router.push('/write')
}
</script>

 

BoardWrite.vue도 마찬가지로 수정한다. (소스코드 생략, 위와 동일한 방식)

 

아마 실제 화면에서 동작을 해보면 뭔가 이상하다는 느낌을 받는 분들이 계실 수도 있다.

그건 나중에 확인하는 것으로 하고..

 

composition api 라는게 이번에 처음 써봤는데 쓰면 쓸수록 너무 편한 것 같다.

뭔가 이전에 vue나 react를 볼 때는 틀에 박힌(?) 느낌이었다면, composition api는 자유로운 느낌(?) 이다.

 

아무튼 vue-router 설정까지 하였으니 다음 포스팅부터는 서버환경 세팅을 진행하도록 하겠다.