[Nuxt.js] Vue.js 페이지 이동 및 파라미터 전달 방법

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링(SSR)을 지원하는 웹 애플리케이션 프레임워크이다. 페이지 이동은 Vue Router를 사용하여 처리할 수 있다. 아래는 Nuxt.js에서 페이지 이동을 위한 몇 가지 기본적인 방법이다.

링크를 사용한 페이지 이동:

Nuxt.js에서 페이지 간의 이동은 <nuxt-link> 컴포넌트를 사용하여 처리할 수 있다. 이 컴포넌트를 사용하면 Vue Router가 내부적으로 처리하므로 페이지 전환 시 SSR을 유지할 수 있다.

<template>
  <div>
    <nuxt-link :to="'/user/' + userId">사용자 페이지로 이동</nuxt-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 123
    };
  }
};
</script>

위의 예제에서는 userId 변수를 사용하여 동적으로 URL을 생성하고 nuxt-link 컴포넌트를 통해 페이지 간 이동을 수행하고 있다. 또한 user 페이지에서 이 파라미터를 받아와 사용할 수 있다.

이때 user 페이지 컴포넌트에서 파라미터를 받아오려면 asyncData 라이프사이클 메서드나 fetch 메서드를 활용할 수 있다. 아래는 간단한 예제이다:

받는 컴포넌트에서 파라미터를 받는 예제:

<template>
  <div>
    <p>사용자 ID: {{ userId }}</p>
  </div>
</template>

<script>
export default { 
    data() { 
        return { 
            userId: null 
        }; 
    }, 
    mounted() {
        this.userId = this.$route.query.userId; 
    } 
};
</script>

이렇게 하면 페이지 간 이동 시 파라미터를 전달하고 받을 수 있다.

프로그래밍 방식으로 페이지 이동:

Vue Router의 $router 객체를 사용하여 프로그래밍 방식으로 페이지를 이동할 수 있다.

<template>
  <div>
    <button @click="goToAboutPage">About 페이지로 이동</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAboutPage() {
      const userId = 123; // 예시로 사용할 사용자 ID
      this.$router.push({ path: '/about', query: { userId: userId } });
    }
  }
};
</script>

받는 컴포넌트에서 파라미터를 받는 예제:

<template>
  <div>
    <p>사용자 ID: {{ userId }}</p>
  </div>
</template>

<script>
export default { 
    data() { 
        return { 
            userId: null 
        }; 
    }, 
    mounted() {
        this.userId = this.$route.query.userId; 
    } 
};
</script>

이렇게 하면 페이지 간 이동 시 파라미터를 전달하고 받을 수 있다