nuxt js 페이지 이동, 레이아웃

 

1. 페이지 이동

 

1) 이동할 페이지 생성

<template>
  <div>board List</div>
</template>

<script>
export default {
  name : 'boardList'
}
</script>

?궁금증 export default name 은 왜 하는걸까? 없어도 페이지이동 되던데..

 

나는 pages 에 새 폴더 만들어서 페이지를 만들어줬다.

 

2) 이동

<nuxt-link to="/board/boardList">ttt</nuxt-link>

<nuxt-link> 태그를 이용해서 페이지이동한다.

to 속성에 이동할 페이지의 디렉토리 정보를 넣어준다.

 

nuxt 특징은 pages에 페이지 만들어주면 .nuxt -> router.js 에 자동으로 라우터가 생성된다.

vue를 쓰면 항상 라우터설정을 해줘야되는데 자동으로 생성되기때문에 좋은듯!

 

2. 레이아웃

 

1) header.vue 생성

<template>
  <header>
    <div id="nav">
      <nuxt-link to="/">Home</nuxt-link> |
      <nuxt-link to="/about">About</nuxt-link> |
      <nuxt-link to="/board/list">게시판</nuxt-link>
    </div>
  </header>
</template>

2) footer.vue 생성

<template>
  <footer>
    <h3>footer 입니다.</h3>
  </footer>
</template>

3)index.vue에 추가

<template>
    <page-header/>
    <nuxt-link to="/board/boardList">게시판 이동</nuxt-link>
    <page-footer/>
</template>

-> 이렇게 하면 에러남!

<template>
  <div>
    <page-header/>
    <nuxt-link to="/board/boardList">게시판 이동</nuxt-link>
    <page-footer/>
  </div>
</template>

template 아래 div 혹은 selection 도 좋으니.. 최상위태그 하나 만들어서 씌워줘야한다.