[Vue] Vite Router(페이지이동) 적용

Router 추가 및 설정

Vue에서 페이지를 이동할때 Router 를 사용한다.
Router 를 사용하기 위해서는 당연히 Router 의존성이 필요하므로 추가해주자.

npm install vue-router
혹은
yarn add vue-rotuer

템플릿들을 적용하려다 보면 import 경로에 @가 들어가있는걸 볼 수 있는데
이는 src 경로를 뜻한다. 설정에서 src 경로를 설정해주어야 한다.
vite.config.js 파일에 alias 를 추가해주자.

import path from 'path' // 추가

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src'), // 추가
    }
  }
})

페이지 생성

이제 가장 먼저 보일 Home.vue 를 생성하자.
src 밑에 views 디렉토리를 생성해서 Home.vue 를 생성하였다.

// Home.vue
<script setup>
</script>

<template>
  HOME
</template>

<style scoped>

</style>

이제 router 설정 파일을 만들어보자.
나는 src/router 디렉토리 안에 index.js 에 router 설정파일을 만들었다.
처음 웹사이트 접속시 home 이 나올수있게 router를 등록해주었다.

// src/router/index.js
import { createRouter, createWebHistory} from 'vue-router'

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

const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior() {
        // always scroll to top
        return { top: 0 }
    },
})

export default router

이제 main.js 파일에 router 를 추가해준다.

// src/main.js
import router from "@/router/index.js";

const app = createApp(App);
app.use(router) // 추가
app.mount('#app')

이제 App.vue 를 수정해줄 차례이다.
vite 프로젝트를 생성하면서 자동으로 생성된 부분들은 다 지워주고
router-view 만 추가해준다.

// App.vue
<script setup>

</script>

<template>
  <router-view /> <!-- 추가 -->
</template>

<style scoped>

</style>

yarn dev 로 서버를 실행시켜보면 이전 나왔던 기본 페이지가 아닌 Home Home 이 나오는걸 확인 할 수 있다.

페이지 이동

그럼 home.vue 에서 home2.vue로 이동해보자.
먼저 router 파일에 home2 경로를 추가해주자

// router/index.js
const routes = [
    {
        path: '/',
        name: 'Home',
        component:()=>import('@/views/Home.vue')
    },
    // home2 추가
    {
        path: '/home2',
        name: 'Home2',
        component:()=>import('@/views/Home2.vue') 
    },
]

Home.vue 에는 home2로 이동할 버튼을 추가해주었다.
페이지 이동은 router.push 로 한다.

// home.vue
<script setup>
import router from "@/router/index.js";
</script>

<template>
  <span>HOME HOME </span>
  <button @click="router.push('/home2')">홈2로 이동</button>
</template>

<style scoped>

</style>

home2.vue 는 간단하게 만들었다.

// home2.vue
<script setup>
</script>

<template>
  <span>HOME HOME 222222</span>
</template>

<style scoped>

</style>

홈2로 이동 버튼을 누르면 home2 로 이동이 잘 되는걸 확인할 수 있다.