[Vue.js] 라우터란?

❗️뷰 라우터 (Vue Router)

뷰 라우터는 Vue.js를 이용하여 SPA를 구현할 때 사용하는 Vue.js 라우터입니다. 공식문서-라우터

라우터란? (Router)

라우터라고 하면 일반적으로 네트워크간에 데이터를 전송하는 장치를 말합니다. 뷰에서 말하는 라우터는 쉽게 말해서 URL에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리라고 생각하면 됩니다.
예를 들어 /home 경로로 요청이 들어왔을 때, Home.vue 컴포넌트를 화면에 렌더링 하는 명령을 내리는 역할을 수행하는 라이브러리라고 생각할 수 있습니다.
이때, /home → Home.vue 이러한 매핑 정보를 라우트(Route)라고도 합니다.

라우트란?(Route)

어떤 URL에 대해 어떤 페이지를 표시해야 하는지에 대한 정보

❗️설치


  npm install vue-router

❗️시작하기

라우트(routes) 정의

URL 요청에 대해 어떤 페이지(컴포넌트)를 보여줄지에 대한 매핑 정보를 정의합니다.

  // src/router/index.js
  import HomeView from '@/views/HomeView.vue';
  import AboutView from '@/views/AboutView.vue';

  const routes = [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView,
    },
  ];

라우터(router) 설정

라우터를 설정해봅시다.

  // src/router/index.js
  import { createRouter, createWebHistory } from 'vue-router';
  import HomeView from '@/views/HomeView.vue';
  import AboutView from '@/views/AboutView.vue';

  const routes = [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView,
    },
  ];
  const router = createRouter({
    history: createWebHistory('/'),
    routes,
  });

  export default router;

설정한 라우터 객체를 Vue 인스턴스에 추가해봅니다.

  import { createApp } from 'vue';

  import App from './App.vue';
  import router fomr './router';

  createApp(App).use(router).mount('#app');

app.use(router)를 호출하면 모든 컴포넌트 내부에서 $router, $route 객체에 접근할 수 있습니다.

❗️네이게이션

뷰 라우터를 HTML과 JavaScript로 사용하는 방법에 대해 알아보도록 하겠습니다.

HTML

  // src/App.vue
  <script setup></script>

  <template>
    <nav>
      <route-link to="/">Home</route-link>
      <span> | </span>
      <route-link to="/about">About</route-link>
    </nav>
    <main>
      <route-view></route-view>
    </main>
  </template>

<route-link> : Vue Router에서는 페이지를 이동할 때에 일반 a태그 대신 사용하는 커스텀 컴포넌트인 <route-link>를 사용하여 다른 페이지 링크를 만들어야 합니다. 이를 통해 Vue Router는 페이지를 리로딩 하지 않고 URL에 매핑된 페이지를 렌더링할 수 있습니다. 👍
<route-view> : URL에 매핑된 컴포넌트를 화면에 표시합니다.

JavaScript

위에서 router를 설정할 때, app.use(router)를 호출했습니다. 이렇게 호출 함으로써 모든 자식 컴포넌트에 router, route 같은 객체를 사용할 수 있습니다. 이러한 객체는 페이지 이동 또는 현재 활성 라우트(경로 매핑)정보에 접근하는 데 사용할 수 있습니다.

router : 라우터 인스턴스로 JavaScripte에서 다른 페이지(컴포넌트)로 이동할 수 있다.

Options API: this.$router
Composition API: useRouter()
template: $router

route : 현재 활성 라우트 정보에 접근할 수 있다.(이 속성은 읽기 전용)

Options API: this.$route
Composition API: useRoute()
template: $route

  <!-- HomeView.vue -->
  <script setup>
  import { useRoute, useRouter } from 'vue-router';

  const router = useRouter();
  const route = useRoute();
  console.log('route.name: ', route.name);
  console.log('route.path: ', route.path);
  const goAboutPage = () => router.push('/about');
  </script>
  <template>
    <h1>Home Page</h1>
    <button @click="goAboutPage">About 페이지로 이동</button>
  </template>

  <!-- AboutView.vue -->
  <script setup></script>
  <template>
    <h1>About Page</h1>
    <ul>
      <li>$route.name: {{ $route.name }}</li>
      <li>$route.path: {{ $route.path }}</li>
    </ul>
    <button @click="$router.push('/')">Home 페이지로 이동</button>
  </template>
  

Tags: vue.js