Vue3 router 사용 예제

먼저 vue3에서 라우터를 사용하기 위해서는

vue-router를 설치해야한다

Installation | Vue Router

npm install vue-router@4

--vue3에서는 @4버전을 사용해야한다.

설치가 완료되면 src폴더 내 router, pages 폴더를 만든다

 

📦 Project
├ 📁 .node_modules       
├ 📁 public
└📁 src
  ├ 📁 router        
  │  └📄 index.js    
  ├ 📁 pages        
  │   ├📁todolist  
  │   │   └📄 index.js 
  │   └📄 index.js   
  ├ 📁 assets
  ├ 📁 components
  ├ 📄app.vue 
  ├ 📄main.js   
└📁 public  
├ 📄 .gitignore
├ 📄 package.json
├ 📄 README.md

 

• 1

/src/router/index.js

import {
  createRouter,
  createWebHistory,
} from "vue-router";
import Home from "../pages/index.vue";              //-①
import Todolist from "../pages/todolist/index.vue"; //-②

let router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/", 
      name: "Home",
      component: Home,  //-①
    },
    { 
    path: "/todolist",
    name: "Todolist", 
    component: Todolist //-②
    },
  ],
});

// 1 /home 2/todolist 3 /todolist/create 4 /todolist/:id

export default router;

 

공식문서에 적힌대로 import와 createrouter를 router로 받는다

• 2

/src/pages/index.js & /src/pages/todolist/index.js

<template lang="">
  <div>Home Page</div>
</template>
<script setup></script>
<style lang=""></style>
//Home


<template lang="">
  <div>Todolist Page</div>
</template>
<script setup></script>
<style lang=""></style>
//Todolist

• 3

/src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index"; //라우터사용시 기본 값이 저장되어있는 index.js를 import해준다

createApp(App).use(router).mount("#app"); //.use(router)가 추가되었다

---

메인 코드가 있는 App.vue에 돌아가서

맨 상단에

 <router-view />를 써준다.

/

 

/Todolist