Vue router 사용하기

1. router 사용하기

npm install vue-router@4

 

2. src 폴데에 router.js 파일 만들기

import { createWebHistory, createRouter } from "vue-router";
import 컴포넌트

const routes = [
  {
    path: "/경로",
    component: 컴포넌트,
  }
];

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

export default router;

 

3. Main.js 에 추가하기

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { createApp } from 'vue'
import App from './App.vue'
// 추가된 내용
import router from './router'
createApp(App).use(router).mount('#app')

 

4.  router 기능 사용하기

  <router-link to="/">홈</router-link>
  <router-link to="/list">리스트</router-link>