Vue3.0 Router

컴포넌트를 정리해두고 클라이언트의 요청경로에 따라 컴포넌트를 불러와 페이지를 구성함

vue3.0부터는 vue-router가 아닌 vue-router@next를 설치

명령어 : npm install vue-router@next

• router/index.js

import { createWebHistory, createRouter } from 'vue-router'; //*중요* 라우터 임포트 바뀜

const routes = [
  {
    path: '/',  //경로
    name: 'Home', //이름 지정
    component: Home, // 컴포넌트 지정
  }
]

const router = new createRouter({
  history: createWebHistory(), //*중요* 히스토리 모드 세팅 바뀜
  base: process.env.BASE_URL,
  routes,
});

export default router;

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';

const app = createApp(App);
app.use(router); // 라우터 모듈 가져오기
app.mount('#app')

• App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/about/asdaisy">About Me</router-link>
    </div>
    <router-view/> //라우터 영역 지정
  </div>
</template>