Nuxt.js에서 화면 이동과 파라미터 전송 방법 #5

Nuxt.js는 Vue.js 기반의 프레임워크로, 화면 간의 전환과 파라미터 전송을 손쉽게 다룰 수 있습니다. Vue Router를 기반으로 하기 때문에 Vue Router의 개념과 메커니즘을 기반으로 설명하겠습니다. 이 블로그 포스팅에서는 Nuxt.js에서 화면 이동과 파라미터 전송 방법을 자세히 살펴보겠습니다.

Table of Contents

화면 이동 방법

Nuxt.js에서 화면 이동은 Vue Router를 사용하여 처리됩니다. 다음은 화면 이동 방법입니다.

1. 링크를 사용한 화면 이동

<nuxt-link> 컴포넌트 또는 <a> 태그를 사용하여 화면 간에 이동할 수 있습니다.

<template>
  <div>
    <nuxt-link to="/about">About 페이지로 이동</nuxt-link>
    <!-- 또는 -->
    <a href="/about">About 페이지로 이동</a>
  </div>
</template>

2. JavaScript를 사용한 화면 이동

this.$router.push() 메서드를 사용하여 JavaScript 코드 내에서 화면을 이동할 수 있습니다.

// 프로그래밍 방식으로 페이지 이동
this.$router.push('/about');

파라미터 전송 방법

파라미터는 라우트 간 데이터를 전달하는 데 사용됩니다. Nuxt.js에서는 두 가지 주요 파라미터 전송 방법이 있습니다.

1. 동적 라우트 파라미터 (Dynamic Route Parameters)

동적 라우트 파라미터를 사용하여 URL의 일부로 파라미터를 전달할 수 있습니다. 예를 들어, 사용자 프로필 페이지를 위한 동적 라우트 파라미터를 사용할 수 있습니다.

// pages/users/_id.vue

<template>
  <div>
    <h1>사용자 프로필 페이지</h1>
    <p>사용자 ID: {{ $route.params.id }}</p>
  </div>
</template>

위의 코드에서 id는 동적 라우트 파라미터로, 페이지 URL의 일부로 사용자 ID를 받아옵니다.

2. 쿼리 문자열 (Query String)

쿼리 문자열을 사용하여 파라미터를 URL에 추가할 수 있습니다. 이 방법은 정적 및 동적 라우트에서 모두 사용할 수 있습니다.

// 화면 이동 시 쿼리 문자열 추가
this.$router.push({ path: '/search', query: { keyword: 'nuxt' } });

화면 이동 후 쿼리 파라미터를 사용하려면 this.$route.query를 통해 데이터에 접근할 수 있습니다.

<template>
  <div>
    <h1>검색 결과</h1>
    <p>검색어: {{ $route.query.keyword }}</p>
  </div>
</template>

Nuxt.js를 사용하면 화면 이동과 파라미터 전송이 간편하며, 위에서 설명한 방법을 활용하여 애플리케이션을 더욱 동적으로 만들 수 있습니다. 애플리케이션의 요구 사항과 사용 사례에 따라 적절한 방법을 선택하여 개발하시면 됩니다.