Siapkan sistem perutean yang kuat untuk aplikasi Vue Anda menggunakan Vue Router.

Vue Router, router resmi untuk Vue, memungkinkan untuk membangun Aplikasi Satu Halaman (SPA) di Vue. Vue Router memungkinkan Anda memetakan komponen aplikasi web Anda ke rute browser yang berbeda, mengelola tumpukan riwayat aplikasi Anda, dan menyiapkan opsi perutean lanjutan.

Memulai Dengan Vue Router

Untuk memulai dengan Vue Router, jalankan perintah berikut npm (Pengelola Paket Node) perintah di direktori pilihan Anda untuk membuat aplikasi Vue Anda:

npm create vue

Saat diminta apakah akan menambahkan Vue Router untuk Aplikasi Satu Halaman pengembangan, pilih Ya.

Selanjutnya, buka proyek Anda di editor teks pilihan Anda. aplikasi Anda src direktori harus menyertakan a router map.

Itu router folder rumah an index.js file yang berisi kode JavaScript untuk menangani rute di aplikasi Anda. Itu index.js file mengimpor dua fungsi dari vue-router kemasan: createRouter Dan buatWebHistory.

Itu createRouter fungsi membuat konfigurasi rute baru dari suatu objek. Objek ini berisi

instagram viewer
sejarah Dan rute kunci dan nilainya. Itu rute key adalah larik objek yang merinci setiap konfigurasi rute, seperti yang terlihat pada gambar di atas.

Setelah mengonfigurasi rute Anda, Anda perlu mengekspor ini router instance dan impor instance ini ke main.js mengajukan:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'


const app = createApp(App)


app.use(router)
app.mount('#app')

Anda mengimpor router berfungsi ke dalam main.js file dan kemudian membuat aplikasi Vue Anda menggunakan fungsi router ini dengan menggunakan metode.

Anda kemudian dapat menerapkan rute Anda ke aplikasi Vue Anda dengan menyusun blok kode yang mirip dengan yang di bawah ini: