서론

---

vue-router는 vue.js제공하는 공식 라우터이다.

이번 포스트에서는 vue3를 기준으로 vue-router 초기 설정을 한다. 여러 가지 방법이 있겠으나, 내가 작성한 방법을 공유하고자 한다.

공식 홈페이지 -> 링크 참조.

본론

---

1. setup

당연히 먼저 vue3 프로젝트가 생성되어 있어야한다. 필자의 폴더 구성은 다음과 같다.

App.vue, main.js, router.js가 핵심이 되겠다. 이번 예시에서는 같은 레벨에 두었다.
router.js는 router폴더 아래에 index.js로 하는 경우도 많다.

2. router.js

2-1. 코드 구성

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

import Home from "./views/Home.vue";
import InputTag from "./components/InputTag.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/input-tag",
    name: "InputTag",
    component: InputTag,
  },
];

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

export default router;

위처럼 import를 따로하고 component에 주입을 해도 되지만,
아래처럼 바로 import를 하여 보다 깔끔하게 주입할 수도 있다.

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

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import(/* webpackChunkName "home" */ '@/views/Home.vue')
  },
  {
    path: "/input-tag",
    name: "InputTag",
    component: () => import(/* webpackChunkName "inputTag" */ '@/components/InputTag.vue')
  },
];

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

export default router;

1. 참고로 여기서의 @는 vue.congig.js의 설정으로 alias를 사용하는 것인데, 아래와 같이 설정하여 src 폴더를 기본으로 잡아두었다.

2. webpackChunkName은 리소스를 분리하고 묶어 번들을 최소하는 용도로 사용된다.

2-2.웹팩 구성

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.join(__dirname, "src/"),
      },
    },
  },
};

포인트를 몇 개 짚어보면 다음과 같다.
1. vue-router, 해당 라우터에서 사용할 컴포넌트 import
2. routes 만들기
3. export 시키기

history: createWebHistory()는 라우터를 구분할 때 기본적으로 해시모드로 진행이 되는데 그렇게 되면 경로에 #이 붙는다. 이걸 제거하려면 히스토리 모드를 사용해야하는데 그걸 위해 쓴다.

3. main.js

main.js의 설정은 간단하다. 기존의 소스에 라우터를 받아서 app.use로 주입하기만 하면 된다.

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

const app = createApp(App);
app.use(router);
app.mount("#app");

4. App.vue

App.vue의 구성은 더 간단하다. 기존의 div 아래에 다른 건 다 지우고 router-view를 설정해주면 되겠다.

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

<script>
export default {
  name: "App",
};
</script>

결론

요즘 Vue 프로젝트를 진행하고 있어서 간단하게 될 줄 알았는데, 개발은 역시 환경구축이 반이라는 걸 새삼 체감했다.

이제 404페이지 랜더링을 해보자.
링크를 참조하시라.