동적 라우트 설정

Nuxt.js에서 동적 라우트를 설정하려면 pages 디렉토리에 동적 라우트를 위한 파일을 생성해야 합니다. 파일 이름은 _로 시작해야 합니다. 예를 들어, _id.vue와 같이 파일을 생성할 수 있습니다.

동적 라우트 파일에서는 asyncData 또는 fetch 등의 메서드를 사용하여 데이터를 불러올 수 있습니다. 이를 통해 동적 라우트에 대한 데이터를 미리 불러와 페이지를 렌더링할 수 있습니다.

다음은 동적 라우트를 위한 간단한 예제 코드입니다.

// _id.vue
<template>
  <div>
    <h1></h1>
    <p></p>
  </div>
</template>

<script>
export default {
  async asyncData({ params }) {
    // 동적 라우트 파라미터(params)를 이용하여 데이터를 가져옴
    const postId = params.id;
    const post = await fetchPostById(postId);
    return { post };
  }
};
</script>

동적 라우트 사용 예제

만약 /post/1과 같은 동적 라우트를 사용하고 싶다면, 아래와 같이 $router.push를 사용하여 동적 라우트를 이동할 수 있습니다.

this.$router.push('/post/1');

마무리

이렇게 Nuxt.js에서 동적 라우트를 설정하고 사용할 수 있습니다. 동적 라우트를 사용함으로써, 동적 데이터를 처리하는 기능을 구현할 수 있고, 페이지의 재사용성을 증가시킬 수 있습니다.

참고 자료:

• Nuxt.js 공식 문서: https://nuxtjs.org/docs/2.x/get-started/routing#dynamic-routes

위의 코드 및 설명이 도움이 되기를 바랍니다. 더 궁금한 점이 있으시다면 언제든지 물어보세요!