pages

Direktori pages berisikan semua halaman dan jalur aplikasi Anda. Nuxt.js membaca semua berkas .vue dalam direktori ini dan secara otomatis membuat konfigurasi jalur (router) untuk Anda.

Anda juga dapat membuat jalur (routes) dengan berkas .js dan berkas .ts.

Setiap komponen halaman (Page component) merupakan komponen Vue, tetapi Nuxt.js menambahkan atribut dan fungsi-fungsi khusus yang dapat membantu Anda dalam pengembangan aplikasi universal Anda semudah mungkin.

pages
<template>
  <h1 class="red">Halo {{ nama }}!</h1>
</template>

<script>
  export default {
    // properti halaman berada disini
  }
</script>

<style>
  .red {
    color: red;
  }
</style>

Halaman-halaman dinamis

Halaman-halaman dinamis dapat dibuat ketika Anda tidak tahu nama halaman tersebut karena nama halaman tersebut datang dari antarmuka pemrograman aplikasi (API) atau Anda tidak ingin membuat halaman yang sama secara berulang. Untuk membuat halaman dinamis, Anda dapat menambahkan simbol garis bawah (underscore) sebelum nama berkas .vue Anda atau sebelum nama direktori Anda jika Anda ingin direktori Anda menjadi dinamis. Anda dapat memberi nama berkas atau direktori Anda dengan apapun yang Anda inginkan, tetapi Anda harus memberi awalan nama tersebut dengan garis bawah (underscore).

Jika Anda memberi nama salah satu berkas _slug.vue dalam direktori pages Anda, Anda dapat mengakses nilai tersebut menggunakan konteks (context) dengan params.slug

pages/_slug.vue
<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // Ketika memanggil /abc maka slug akan menjadi "abc"
      return { slug }
    }
  }
</script>

Jika Anda memberi nama sebuah berkas bernama _slug.vue di dalam direktori _book.vue, Anda dapat mengakses nilai tersebut menggunakan konteks (context) dengan params.slug dan params.book

pages/_book/_slug.vue
<template>
  <h1>{{ this.book }} / {{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const book = params.book
      const slug = params.slug
      return { book, slug }
    }
  }
</script>

Properti

asyncData

AsyncData dipanggil setiap kali sebelum pemuatan (loading) komponen terjadi. Properti ini dapat menjadi asynchronous dan menerima konteks (context) menjadi argumen. Objek yang dikembalikan akan digabung (merged) dengan objek data Anda.

pages/index.vue
export default {
  asyncData (context) {
    return { name: 'World' }
  }

Lihat informasi lebih lanjut mengenai bagaimana asyncData bekerja, pada bab Data Fetching

fetch (pengambilan)

Setiap kali anda ingin mendapatkan data asynchronous anda dapat menggunakan fungsi fetch. Fetch dipanggil pada server-side ketika me-render jalur (route), dan pada client-side ketika bernavigasi.

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

Lihat lebih lanjut bagaimana fetch bekerja pada bab Data Fetching

head (kepala)

Menetapkan label

yang spesifik untuk halaman sekarang, Nuxt.js menggunakan vue-meta untuk memperbarui dokumen head dan atribut-atribut meta pada aplikasi Anda.

pages/index.vue
export default {
  head() {
    // Tetapkan _Meta Tags_ untuk halaman ini
  }
}

Lihat lebih lanjut pada bab Meta Tags dan SEO.

layout (penampilan)

Tentukan penampilan pada direktori layouts

pages/index.vue
export default {
  layout: 'blog'
}

Lihat lebih lanjut mengenai layouts pada bab Views.

loading (memuat)

Jika ditetapkan menjadi false, menghindari halaman melakukan panggilan otomatis kepada fungsi this.$nuxt.$loading.finish() ketika Anda masuk dan this.$nuxt.$loading.start() ketika Anda meninggalkannya, membiarkan Anda mengontrol secara manual tingkah lakunya, seperti pada contoh ini memperlihatkan.

pages/index.vue
export default {
  loading: false
}

Hanya berlaku jika pemuatan (loading) juga ditetapkan pada nuxt.config.js.

Lihat lebih lanjut pada bab Loading.

transition (transisi)

Menetapkan transisi secara spesifik untuk halaman tertentu.

pages/index.vue
export default {
  transition: 'fade'
}

Lihat lebih lanjut pada bab Transitions.

scrollToTop (gulir ke atas)

Properti scrollToTop membiarkan Anda untuk memberi perintah pada Nuxt.js untuk melakukan pengguliran ke atas sebelum halaman di-render. Secara bawaan, Nuxt.js melakukan pengguliran ke atas ketika Anda mengganti ke halaman lain, tetapi jalur anak-anak (child routes), Nuxt.js mempertahankan posisi pengguliran. Jika Anda ingin memberi perintah pada Nuxt.js untuk melakukan pengguliran ke atas ketika melakukan render jalur anak-anak Anda, tetapkan scrollToTop menjadi true.

pages/index.vue
export default {
  scrollToTop: true
}

Sebaliknya, Anda juga dapat secara manual menetapkan scrollToTop menjadi false pada jalur induk (parent routes).

Jika Anda ingin menimpa tingkah pengguliran secara bawaan dari Nuxt.js, silahkan melihat pada scrollBehavior Option.

middleware

Menetapkan middleware untuk halaman ini. Middleware tersebut akan dipanggil sebelum melakukan render pada halaman.

pages/index.vue
export default {
  middleware: 'auth'
}

Lihat lebih lanjut pada bab Middleware.

Properti watchQuery

Gunakan kunci watchQuery untuk menetapkan pengintai (watcher) untuk query strings. Jika strings berubah, maka semua fungsi (methods) komponen (asyncData, fetch, validate, layout, ...) akan dipanggil. Pengintaian dimatikan secara bawaan untuk meningkatkan performa.

pages/index.vue
export default {
  watchQuery: ['page']
}

Jika anda ingin menetapkan pengintai (watcher) untuk semua query strings, tetapkan watchQuery menjadi true.

pages/index.vue
export default {
  watchQuery: true
}

Anda juga dapat menggunakan fungsi watchQuery(newQuery, oldQuery) untuk mendapat pengamat yang lebih baik.

pages/index.vue
export default {
  watchQuery(newQuery, oldQuery) {
    // Hanya eksekusi metode pada komponen jika _old query string_ mengandung 'bar'
    // dan _new query string_ mengandung 'foo'
    return newQuery.foo && oldQuery.bar
  }
}

Lihat lebih lanjut mengenai properti watch query pada bab Data Fetching.

Mengabaikan Halaman

Jika Anda ingin mengabaikan halaman-halaman agar mereka tidak dimasukkan dalam berkas router.js yang dihasilkan secara otomatis, maka anda dapat mengabaikan mereka dengan memberi awalan (prefixing) dengan -.

Sebagai contoh, pages/-about.vue akan diabaikan.

Lihat ignore option untuk mempelajari lebih lanjut.

Konfigurasi

Anda dapat mengganti nama direktori pages/ menjadi yang lain dengan opsi pengaturan dir.pages:

nuxt.config.js
export default {
  dir: {
    // Mengganti nama direktori `pages` menjadi `routes`
    pages: 'routes'
  }
}

Lihat dir option untuk mempelajari lebih lanjut.

Kontributor

Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!