Nuxt.js는 자동으로 라우터 객체를 만들어 주어서 우리가 컴포넌트 안에서 this.$router로 라우터 객체에 접근할 수 있다. this.$router.push(url)은 인자로 받은 url로 이동하라는 의미이다.
<template lang="">
<div class="app">
<main>
<div>
<input type="text" />
</div>
<ul>
<li
class="item flex"
v-for="product in products"
:key="product.id"
**@click="moveToDetailPage(product.id)"**
>
<img
class="product-image"
:src="product.imageUrl"
:alt="product.name"
/>
<p>{{ product.name }}</p>
<span>{{ product.price }}</span>
</li>
</ul>
</main>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'IndexPage',
...
methods: {
**moveToDetailPage**(id) {
**this.$router.push(`detail/${id}`)**
},
},
}
</script>
<style scoped>
</style>
이미지를 클릭하면 moveToDetailPage 메서드에 의해 datail/${id} url로 이동하게 된다.
_는 이 값이 파라미터라는 것을 의미한다. 그리고 _ 뒤의 param 값은 우리가 넘겨줄 파라미터 값이다. 즉, 파라미터로 넘겨지는 값을 url로 하는 페이지를 만들 수 있다는 말!
우리는 위에서 datail/${id} url로 이동하기로 했으므로 디렉토리 구조를 다음과 같이 짠다.
pages
|_ **detail**
|_ **_id.vue**
그리고 _id.vue에서 created() 시 this.$route를 찍어 제대로 찍히는지 확인해본다.
<template lang="">
<div>
<h1>상세 페이지</h1>
</div>
</template>
<script>
export default {
created() {
**console.log(this.$route)
const id = this.$route.params.id**
},
}
</script>
<style></style>
@/api 디렉토리 밑에 fetch.js라는 파일을 만든다. 여기서 공통적으로 사용할 수 있는 api 함수를 선언해 줄 것이다.
import axios from 'axios'
/* 간단한 axios 인스턴스 생성 */
const instance = axios.create({
baseURL: '<http://localhost:3000>',
})
function fetchProductById(id) {
return instance.get(`products/${id}`)
}
export { fetchProductById }
이 함수는 만약 우리가 서버의 url인 http://localhost:3000/products/${id}로 들어가게 되면 id에 해당하는 물품의 정보를 받아올 수 있기 때문에 작성한 것이다.