Vue3 Router사용

vue3 router

npm i vue-router@next --save

cmd창에서 vue3 router를 설치해준다.

src 폴더아래 routes 폴더 생성
routes 폴더아래 index.js를 생성해준다음

// index.js
import { createRouter, createWebHistory } from "vue-router";

// 라우터에 등록할 vue파일
import Home from '@/components/Home.vue'; 


const routes = [
    {
          path : "/",
        name : "Home", 
        component : Home
    },

]

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

export default router;

main.js에서 router를 import하여 사용할수있게된다.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from'./routes'    // 라우터 추가

const app = createApp(App);

app.use(router);    // 사용 설정

app.mount('#app')

이후 App.vue에서 설정한 라우터를 사용해보자

<!-- App.vue -->
<template>
    <router-view></router-view>    <!-- router 사용 -->
</template>

<script>
export default {
}
</script>

크롬화면에 Home.vue 내용이 보이면 라우터 설정 성공!