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 로 이동이 잘 되는걸 확인할 수 있다.