vue-router 설치 및 기본적인 사용 방법 정리

뷰 라우터도 리액트에서 쓰이는 라우터와 비슷한 듯 약간의 명칭만 조금 달라지는 것 같다.

먼저, 뷰 프로젝트에 라우터를 설치한다.

$ npm install vue-router@4
OR
$ npm i vue-router
OR
$ yarn add vue-router@4

이 글을 볼 때 4버전이 아닐 수 있으니, 공식문서에서 한번 더 체크를 권장한다. 

 

먼저 프로젝트에 라우터를 설정을 한다.

import { createWebHistory, createRouter } from "vue-router";
import Component1 from './Component1.vue';
import Component2 from './Component2.vue';

const routes = [
  {
    path: "/경로1",
    component: Component1,
  },
  {
    path: "/경로2",
    component: Component2,
  }
];

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

export default router;

path : 경로로 앞에 슬래시 ('/')를 붙여주고 원하는 명칭을 작성한다.

component : path로 들어갈 때 보여줄 컴포넌트를 import를 해준다.

 

이후에 계속 새로운 경로를 추가하여 작성할 수 있다. 여기서 상단에 있는 경로1이 가장 우선순위가 된다. 중요한 홈페이지 순으로 정렬을 하면 된다.

 

그런 다음 main.js에도 라우터를 쓴다는 의미로 일부 코드를 수정해준다.

import router from './router'
createApp(App).use(router).mount('#app')

이후에는 내가 페이지 이동 링크를 만들고 싶으면 아래 처럼 사용하면 된다.

 

 

router-link

router-link는 HTML에서 a와 같은 역할을 한다. to라는 속성이 a태그에서 href 속성과 동일하다.

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

해당 a태그를 넣고 싶은 곳 안에 넣어주면 끝이다.

 

router-view

현재 라우터가 제공하는 컴포넌트가 렌더링이 된다. 예를 들어 App.vue와 router/index.ts에 아래와 같은 코드가 있다고 가정해본다.

<!-- App.vue -->
<template>
  <v-app>
    <router-view></router-view>
  </v-app>
</template>

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home view",
      component: () => import("@/views/MainHome.vue"),
    },
  ],
});

export default router;

위 코드처럼 있는 경우 우리는 메인에는 MainHove.vue를 보여주게 된다. 이 표현이 맞는걸까?