[vue/nuxt] nuxt-link로 파라미터 보내는 방법 (query, param 데이터 확인하기)

Nuxt 페이지 이동

 

😶 Nuxt에서 A태그 이용하기

Nuxt에서 페이지를 이동하려면 <nuxt-link>를 이용한다.

사용방법은 아래와 같다.

<nuxt-link to="/page">해당 페이지 이름으로 이동</nuxt-link>
<nuxt-link :to="{path:'page', query:{id:1}}">해당 페이지로 이동하면서 URL 파라미터를 던짐</nuxt-link>
<nuxt-link :to="{name:'page-id', params:{id:1}}">동적라우터로 이동합니다.</nuxt-link>

nuxt-link를 위에처럼 작성해줄 경우 HTML로 랜더링을 확인해보자.

nuxt-link to 파라미터 보내기

 

그럼 각각 페이지별로 어떻게 파라미터를 받을지 확인해보도록 하겠다.

 

 

 

 

 

😁Query 파라미터 받기

page/index.vue

<template>
  <div>
    <h1>Query 파라미터 값은? : {{query}}</h1>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        query:'',
      }
    },
    mounted() {
      this.query = this.$route.query.id;
    }
  }
</script>

query파라미터로 보낸 내용은 this$route.query로 받으면 된다.

나의 경우 쿼리 파라미터를 id로 보내서 id값을 받아서 화면에 표시해줬다.

 

결과 화면

nuxt query파라미터값 확인하기

query변수에 담긴 파라미터 값이 제대로 나오는 것을 확인할 수 있다.

 

 

 

---

 

 

😎동적 라우터 확인하기

<nuxt-link :to="{name:'page-id', params:{id:1}}">동적라우터로 이동합니다.</nuxt-link>

먼저 동적 라우터의 경우 path대신 name으로 경로를 적어준다.

page-id라는 경로는 /page/_id.vue로 연동이 된다.

 

nuxt 동적라우터 폴더구조

경로는 위 이미지를 참고 바란다.

 

page/_id.vue

<template>
  <div>
    <h1>동적라우터 Param : {{param}}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return{
      param:'',
    }
  },
  mounted() {
    this.param = this.$route.params.id;
  }
}
</script>

동적 라우터의 params로 받은 파라미터는 this.$route.params로 받아올 수 있다.

 

결과 화면

nuxt 동적라우터 params 결과화면

 

마찬가지로 page/1 뒤에 나오는 params 값을 제대로 가져오는것을 확인할 수 있다.