BLACK FRIDAY - Get 35% off your Mastering Nuxt license!

Routing

Route Otomatis

Sebagian besar situs web akan memiliki lebih dari satu halaman (yaitu halaman home, halaman about, halaman contact, dll.). Untuk menampilkan halaman ini, kita membutuhkan Router. Di situlah vue-router masuk. Ketika bekerja dengan aplikasi Vue, Anda harus mengatur file konfigurasi (yaitu router.js) dan menambahkan semua rute Anda secara manual ke sana. Nuxt.js secara otomatis membuat konfigurasi vue-router untuk Anda, berdasarkan file Vue yang Anda sediakan di dalam direktori pages. Itu berarti Anda tidak perlu menulis konfigurasi router lagi! Nuxt.js juga memberi Anda pemisahan kode otomatis untuk semua rute Anda.

Dengan kata lain, yang harus Anda lakukan untuk memiliki perutean di aplikasi Anda adalah membuat file .vue di folder pages.

Pelajari lebih lanjut tentang Routing

Untuk menavigasi antar halaman aplikasi Anda, Anda harus menggunakan komponen NuxtLink. Komponen ini disertakan dengan Nuxt.js dan oleh karena itu Anda tidak perlu mengimpornya seperti yang Anda lakukan dengan komponen lain. Ini mirip dengan tag <a> HTML, kecuali bahwa alih-alih menggunakan yang href="/about" kita gunakan to="/about". Jika Anda pernah menggunakan vue-router sebelumnya, Anda dapat menganggapnya <NuxtLink> sebagai pengganti <RouterLink>

Tautan sederhana ke halaman index.vue di folder pages Anda:

pages/index.vue
<template>
  <NuxtLink to="/">Halaman Beranda</NuxtLink>
</template>

Untuk semua link ke halaman dalam situs Anda, gunakan <NuxtLink>. Jika Anda memiliki tautan ke situs web lain, Anda harus menggunakan tag <a>. Lihat contoh di bawah:

pages/index.vue
<template>
  <main>
    <h1>Halaman Beranda</h1>
    <NuxtLink to="/about">
      Tentang (tautan internal milik Aplikasi Nuxt)
    </NuxtLink>
    <a href="https://nuxtjs.org">Tautan Eksternal ke halaman lain</a>
  </main>
</template>

Pelajari lebih lanjut tentang Komponen NuxtLink.

Kontributor

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

Platinum Sponsors

StoryblokMoovweb Support Us