Nuxt.js -Page, Views, Routing -1

1. pages 하위에 디렉토리 vs vue components

 pages 하위에 디렉토리 만들 경우 디렉토리 명칭이 라우터 주소 대신해 주고 디렉토리 안에는 꼭 index.vue 명칭 지켜야 한다. 

 pages 하위에 디렉토리 만들지 않고 vue 파일만 만들경우 해당 컴포넌트 이름이 라우터 주소 역할을 한다. 

 

2. dynamic path

ex) users/120303

 1) 파일로 만들 경우 pages 폴더 하위에 users 폴더 하위에 _id.vue 파일 만들기

 2) 폴더로 만들 경우 pages 폴더 하위에 users 폴더 하위에 _id 폴더만들고 그 하위에 index.vue 만들기

 id 파일 혹은 폴더 하위에 {{ $route.params.id}}로 해줘야 한다. id는 파일 혹은 폴더 명칭 따라가기

 

3. Adding Links & Navigation Around

<a href="/user">users<a> - 서버로 호출하는 것 

<nuxt-link to="/users">Users</nuxt-link> - SPA같이 서버로 호출하는 것 아님 

 

4. Validating Params

nuxt에서 validate 하기위해 script에 

<script>
export default {
  validate (data) {
    return /^\d+$/.test(data.params.id)
  },
  layout: 'users'
}
</script>

이런 식으로 작성한다. 위에는 숫자만 입력되었을 때 해당 내용 불러온다.

 

5. Nested Route

pages 하위에 users.vue랑 users폴더 놔둘 경우 users.vue에 nuxt-child놓으면 users 폴더 하위 내용 넣을 수 있다. 

 

6. Layouts & Pages & Components

Layout이 맨 밖에 있고, 그 안에 page, component는 page안에서 재 사용할 수 있는 것들을 제작

 

1) Layout : 

<template>
  <div>
    <Header />
    <header>
      USERS SECTION
    </header>
    <nuxt/>
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  components: {
    Header
  }
}
</script>


<style>
</style>

<nuxt/> 넣어줘야 된다.  해당 layout을 사용하는 모든 페이지에서는 layout: 'users'이렇게 넣어줘야 하고

 

- error.vue :  layout에 만들어 놓으면 validate에서 잘못 되었을 때 이 쪽으로 간다.

 

2) Components : 

 page나 layout에서 재 사용할 수 있다. 

7. Style

style 테그를 하나의 컴포넌트 안에 넣을 라면 <style scoped> 넣어줘야 그 페이지에서만 적용된다. 

nuxt.config.js에 style 경로 설정해주면 된다. (Global css)