[Nuxt.js] 학습정리

Nuxt ?  파일 기반의 자동 라우팅 생성이 넉스트의 특징.

 

- 디렉터리 구조 설명

[pages]

pages 내부에 생성한 main.vue 페이지는

localhost:3000/main 으로 바로 접근이 가능하다.

 

폴더나 vue파일을 생성하고 서버를 실행하면 .nuxt/router.js 에서 해당 이름들을 확인 할 수 있다.

 

[layouts]

error 페이지는 layouts/error.vue 로 작성하면 자동으로 인식해서

존재하지 않는 경로를 요청 할 경우

자동으로 페이지를 넘겨준다.

 

default.vue 공통된 UI들을 보여주고 싶을 때 사용한다. 헤더, 푸터 등

헤더에서 메뉴를 보여주고싶을때 vue에서는 <router-link> 를 사용했지만

nuxt에서는 <NuxtLink to="/">홈페이지</NuxtLink> 로 변경하여 사용해준다.

 

<Nuxt> 는 <router-view>

<NuxtLink> 는 <router-link> 

 

 

nuxt에서 REST API 호출방식은

 asyncData 와 fetch 두가지 방법이 있다.

 

asyncData : 페이지 컴포넌트에서만 제공되는 속성이다. (Page 폴더 내부의 vue 파일을 의미함)

 nuxt에서 추구하는 서버 사이드 렌더링의 데이터 호출 방식이다.

asycnData 속성의 파라미터는 context 속성이다.

컨텍스트에는 스토어, 라우터 관련 정보 뿐만 아니라 요청, 응답과 관련된 속성도 접근 할 수 있다.

ex ) acync({ param })

 

 

@input=$emit('input', $event.target.value)   상위컴포넌트로 값을 보내고 싶을때