Vue.js Router

Vue.js adalah kerangka kerja javascript reaktif, yang digunakan untuk membangun UI (Antarmuka Pengguna) dan SPA (Aplikasi Satu Halaman) dan pengembang suka membuat kode dan merasakan kebebasan dan kenyamanan saat mengembangkan aplikasi di Vue.js. Untuk tujuan perutean, Vue.js tidak menyediakan fitur perutean bawaan. Tetapi ada perpustakaan pihak ketiga resmi dengan nama Vue Router untuk menyediakan fitur ini. Dengan menggunakan fitur ini kita dapat menavigasi antar halaman web tetapi tanpa memuat ulang. Jadi, dalam artikel ini, kita akan melihat bagaimana kita dapat menginstal dan menggunakan Vue Router di Vue.js.

Instalasi

Kita dapat menginstal router Vue ke Vue yang sudah ada.js proyek dengan menjalankan perintah berikut di terminal

npm instal vue-router

Setelah instalasi berhasil, kita perlu mengimpor VueRouter di main.js file di direktori src juga menggunakan sintaks berikut:

impor Vue dari 'vue'
impor router dari './router'
Vue.gunakan (perute)

Setelah mengimpor router, Anda dapat menggunakan vue-router di proyek Anda.

Tetapi jika Anda menginstal Vue.js menggunakan Vue CLI. Anda tidak memerlukan langkah instalasi tambahan ini. Anda dapat menambahkan plugin vue-router saat memilih preset.

Pemakaian

Penggunaan vue-router sangat sederhana dan mudah digunakan. Pertama, di template atau HTML

Dalam contoh vue-router yang cukup sederhana dan jelas ini. Kami telah membuat navigasi sederhana menggunakan komponen tautan router dan menyediakan tautan menggunakan prop bernama 'ke'. Tautan router berfungsi sama seperti tag 'a' jangkar. Ini sebenarnya diterjemahkan sebagai tag 'a' secara default. Dalam tampilan router, kita akan memiliki komponen relatif yang cocok dengan rute.

Dalam javascript, pertama-tama kita harus mendaftar dan mengimpor komponen untuk menentukan rutenya. Kami menganggap bahwa kami memiliki komponen bernama Comp.vue di direktori views yang akan kita impor di indeks router.js file di direktori router dan tentukan sebagai rute.

Untuk mengimpor komponen, kami menggunakan pernyataan berikut:

impor Comp dari "… /views/Comp.vue";

Setelah mengimpor, kita harus menentukan rute sekarang dan memetakannya ke komponen. Seperti ini,

rute konstan = [

jalur: "/",
nama: "Kom",
komponen: Komp

];

Kami juga dapat memberikan beberapa rute, dipisahkan dengan koma. Seperti ini,

rute konstan = [

jalur: "/",
nama: "Kom",
komponen: Komp
,

jalur: "/ comp2",
nama: "Kom2",
komponen: Comp2

];

Setelah menentukan rute. Lewati array rute ke instance router. Jadi, mari buat instance router juga

const router = createRouter(
rute // kependekan dari 'rute: rute'
);

Pada akhirnya, pada intinya.file js. Kita harus membuat instance root dan memasangnya juga dan menyuntikkan rute di dalamnya sehingga seluruh aplikasi mengetahui rute.

buatAplikasi(Aplikasi)
.gunakan (perute)
.mount("#aplikasi");

Dengan menggunakan teknik injeksi ini. Kami dapat mengakses router di komponen apa pun, menggunakan ini.$router.

Kami sekarang dapat mendorong rute secara terprogram dengan mengklik tombol atau apa pun yang Anda inginkan, alih-alih menggunakan komponen tautan router. Sebagai contoh,

metode:
klikFunc()
ini.$router.tekan('/tentang')

Penutup dan ringkasan

Pada artikel ini, kita telah belajar menginstal Vue Router menggunakan berbagai cara dan belajar menggunakan Vue router secara terprogram di javascript dan di Vue.template js. Kami juga telah belajar untuk mengatur Vue Router dalam proyek yang ada dalam panduan terperinci yang sangat mudah dan langkah demi langkah. Jika Anda ingin mempelajari lebih lanjut tentang Vue Router, silakan kunjungi Vue Router: Dokumen Resmi.