Vue - 3.Router

Routing 방법

1. vue-router을 설치한다

npm install vue-router@next
npm install --save-dev @types/node

2. components > router 폴더를 만든 후 index.ts 파일을 생성한다

// index.ts
import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import HomePage from '@/views/HomePage.vue'
import TestPage from '@/views/TestPage.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home', // 이동할 경로
    name: 'HomePage',
    component: HomePage // 보여줄 컴포넌트
  },
  {
    path: '/test',
    name: 'TestPage',
    component: TestPage
  }
]

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

export default router

여기서 routes 배열이 내가 보여줄 뷰 파일들이다.

3.main.ts를 설정해준다. 여기서 중요한것은
첫번째 - 뷰 초기 설정인 createApp(App)을 직접 사용하지 않고 const app 으로 변수 선언을 한 후 사용해야 한다는 것 이다.
두번째 - app.use(router)이 가장 위에 선언되어야한다. 이러지 않으면 routing이 안된다.

import './assets/main.css'
import router from './router'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

4.App.vue에 router을 설정해준다

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

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

<style scoped></style>