Vue.Penghala js

Vue.js adalah kerangka kerja javascript reaktif, yang digunakan untuk membina UI (Antaramuka Pengguna) dan SPA (Aplikasi Satu Halaman) dan pembangun suka membuat kod dan merasakan kebebasan dan keselesaan semasa mengembangkan aplikasi di Vue.js. Untuk tujuan penghalaan, Vue.js tidak menyediakan ciri penghalaan terbina dalam. Tetapi ada perpustakaan pihak ketiga rasmi dengan nama Vue Router kerana menyediakan ciri ini. Dengan menggunakan ciri ini, kita dapat menavigasi antara laman web tetapi tanpa memuat semula. Jadi, dalam artikel ini, kita akan melihat bagaimana kita dapat memasang dan menggunakan Vue Router di Vue.js.

Pemasangan

Kita boleh memasang penghala Vue ke dalam Vue yang ada.projek js dengan menjalankan perintah berikut di terminal

npm pasang vue-router

Selepas pemasangan berjaya, kita perlu mengimport VueRouter di utama.fail js dalam direktori src juga menggunakan sintaks berikut

import Vue dari 'vue'
import penghala dari './ penghala '
Vue.gunakan (penghala)

Setelah mengimport penghala, anda senang menggunakan dan menggunakan vue-router dalam projek anda.

Tetapi jika anda memasang Vue.js menggunakan Vue CLI. Anda tidak memerlukan langkah pemasangan tambahan ini. Anda boleh menambah pemalam vue-router semasa memilih pratetap.

Penggunaan

Penggunaan router vue sangat mudah dan senang digunakan. Pertama, dalam templat atau HTML

Dalam contoh vue-router yang cukup mudah dan jelas ini. Kami telah membuat navigasi mudah menggunakan komponen pautan penghala dan menyediakan pautan menggunakan alat peraga bernama 'hingga'. Pautan penghala berfungsi sama dengan penanda 'a' tag. Ini sebenarnya diberikan sebagai tag 'a' secara lalai. Dalam paparan penghala, kita akan mempunyai komponen relatif yang sepadan dengan laluan.

Dalam javascript, pertama kita harus mendaftar dan mengimport komponen untuk menentukan laluannya. Kami menganggap bahawa kami mempunyai komponen bernama Comp.vue dalam direktori paparan yang akan kita impor dalam indeks penghala.fail js di direktori penghala dan menentukannya sebagai laluan.

Untuk mengimport komponen, kami menggunakan pernyataan berikut

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

Setelah mengimport, kita harus menentukan laluan sekarang dan memetakannya ke komponen. Seperti ini,

laluan const = [

jalan: "/",
nama: "Comp",
komponen: Komp

];

Kita juga boleh memberikan beberapa laluan, dipisahkan dengan koma. Seperti ini,

laluan const = [

jalan: "/",
nama: "Comp",
komponen: Komp
,

jalan: "/ comp2",
nama: "Comp2",
komponen: Comp2

];

Setelah menentukan laluan. Laluan laluan laluan ke contoh penghala. Oleh itu, mari kita buat contoh penghala juga

const router = createRouter (
laluan // pendek untuk 'rute: laluan'
);

Pada akhirnya, di utama.fail js. Kita harus membuat instance root dan memasangnya juga dan menyuntikkan rute di dalamnya sehingga seluruh aplikasi menyedari laluannya.

createApp (Aplikasi)
.gunakan (penghala)
.pasang ("# aplikasi");

Dengan menggunakan teknik suntikan ini. Kita dapat mengakses penghala dalam komponen apa pun, menggunakan ini.penghala $.

Kita sekarang dapat mendorong laluan secara terprogram dengan mengklik butang atau apa sahaja yang anda mahukan, bukannya menggunakan komponen pautan penghala. Sebagai contoh,

kaedah:
klikFunc ()
ini.penghala $.tolak ('/ about')

Pembungkus dan ringkasan

Dalam artikel ini, kita telah belajar memasang Vue Router dengan cara yang berbeda dan belajar menggunakan Vue router secara terprogram dalam javascript dan di Vue.templat js. Kami juga belajar mengatur Vue Router dalam projek yang ada dalam panduan terperinci yang sangat mudah dan langkah demi langkah. Sekiranya anda ingin mengetahui lebih lanjut mengenai Vue Router, sila kunjungi Vue Router: Official Docs.