vue 3 router 사용하기

router 란 무엇인가?

html에서 사용하는 <a href="가고자하는 주소"> 의 기능이라고 보면 된다.

그리고 해당 링크에 있을경우 재 클릭을 방지하는 역활도 가지고 있다고 하네

 

https://router.vuejs.org/kr/api/#router-link

 

사용법은

vue-router 설치 ▶ router.js 만들기 ▶ router에서 사용할 페이지 미리만들기 (안 만들면 구동시 오류 남) ▶ main.js에서 가져오기

▶ App.vue에서 사용하기

이런식으로 사용한다.

 

1) vue-router설치

npm i vue-router@next

 

2) router.js 만들기

import { createWebHistory, createRouter } from "vue-router"; // 라우터 라이버러리 import

const routes = [
  {
    path: "/", //브라우저 경로
    name: "Home",
    component: () => import("@/views/Home"), //접근할 파일명
  },
  {
    path: "/about",
    name: "About",
    component: () => import("@/views/About"),
  },
];

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

export default router; //다른파일에서 사용하기 위해 export 시킴

 

3) Home.vue, About.vue만들기 

<!-- Home.vue -->
<template>
  <h1> Home </h1>
</template>

<!-- About.vue -->
<template>
  <h1> About </h1>
</template>

 

4) main.js에서 가져오기

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router.js" //가져오기

createApp(App)
 .use(router) //사용하기
 .mount("#app");

 

5) App.vue에서 가져오기

<template>
  <div>
      <router-link to="/"> Home </router-link>
      <router-link to="/about"> About </router-link>
  </div>

  <div>
      <router-view/>
    </div>
</template>

실행화면