Vue routing

---

🧭 Vue Router란?

정의

Vue Router는 Vue 애플리케이션에서 URL에 따라 컴포넌트를 바꾸는 라우팅 라이브러리다.

사용자 입력이나 주소 변경에 따라 화면을 동적으로 전환할 때 사용한다.

🧩 기본 구조

• views 폴더에 라우트 단위 컴포넌트를 둔다.
• App.vue에서 RouterLink, RouterView를 사용한다.
• router/index.js에서 라우트 정보를 정의한다.

🛠️ 주요 컴포넌트

RouterLink

• 링크 클릭으로 라우트를 이동한다.

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<RouterLink :to="{ name: 'user' }">User</RouterLink>

RouterView

• 현재 경로에 맞는 컴포넌트를 렌더링한다.

<RouterView />

⚙️ 라우트 설정 예시

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../views/AboutView.vue"),
    },
    {
      path: "/user/:id",
      name: "user",
      component: () => import("../views/UserView.vue"),
    },
    {
      path: "/:pathMatch(.*)*",
      name: "error",
      component: () => import("../views/NotFoundView.vue"),
    },
  ],
});

🔁 라우팅 API

useRouter

• 프로그래밍 방식으로 페이지를 이동할 때 사용한다.

import { useRouter } from "vue-router";

const router = useRouter();

router.push({ name: "home" });
router.push({ name: "user", params: { id: 1 } });
router.push({ name: "about", query: { name: "issac" } });

useRoute

• 현재 라우트 정보를 가져올 때 사용한다.

import { useRoute } from "vue-router";

const route = useRoute();
console.log(route.params.id);

replace / go

router.replace({ name: "home" });
router.go(-1);
router.go(1);

🛡️ Navigation Guard

• 라우트 이동 전후에 진입 여부를 제어할 수 있다.

beforeEach

router.beforeEach((to, from) => {
  return { name: "home" };
});

beforeEnter

{
  path: "/user/:id",
  name: "user",
  component: () => import("../views/UserView.vue"),
  beforeEnter: (to, from) => {
    return { name: "home" };
  },
}

onBeforeRouteLeave

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm("정말 떠나실건가요?");
  if (answer === false) {
    return false;
  }
});

onBeforeRouteUpdate

• 같은 컴포넌트에서 경로만 바뀌는 경우에 사용한다.

📦 Lazy Loading

• 컴포넌트를 처음 방문할 때만 불러오도록 설정할 수 있다.

component: () => import("../views/AboutView.vue");

📌 정리

• Vue Router는 URL과 화면을 연결하는 핵심 도구다.
• RouterLink, RouterView, useRouter, useRoute를 먼저 익히면 된다.
• 동적 라우트와 가드를 함께 이해하면 실제 프로젝트에서 활용하기 쉽다.

---

연결문서

• Vue-프로젝트-Init
• Vue-Component
• Vue-환경변수
• Vuejs