Panduan Untuk Vue Router

Pengantar

Saat mengembangkan aplikasi web dengan Vue.js, kecuali jika Anda sedang membangun Aplikasi Halaman Tunggal (SPA), Anda dapat menghubungkan beberapa laman ke laman landas untuk memungkinkan pengguna menavigasinya. Ini dikenal sebagai rute.

Perutean adalah proses di mana pengguna dinavigasi ke halaman yang berbeda di situs web. Vue.js adalah kerangka kerja JavaScript yang digunakan untuk membuat Aplikasi Halaman Tunggal, yang berarti bahwa aplikasi ini hanya dimuat sekali dari server ke browser, dan browser tidak perlu memuat ulang saat perutean; sebagai gantinya, itu hanya meminta halaman-halaman ini dan halaman-halaman itu dimuat.

Dalam panduan ini, kita akan belajar bagaimana melakukan perutean dengan Vue.js dan mempelajari berbagai jenis perutean yang dapat dilakukan dan bagaimana melakukannya.

Mulai

Perutean di Vue.js dilakukan dengan Router Vue, yang bekerja bersama-sama dengan pustaka inti Vue untuk memungkinkan kita menyiapkan sistem perutean. Kami ingin menggunakan vue-router dalam dua skenario dalam proyek kami. Kami ingin menggunakan router di proyek yang ada atau menambahkannya saat membuat proyek baru.

Setup Vue Router Dalam Proyek Yang Ada

Mengintegrasikan vue-router ke dalam proyek yang ada dapat bersifat teknis, dan kami akan membahas detail ini sekarang. Langkah pertama adalah menginstal paket router vue menggunakan perintah berikut:

! npm install vue-router@4

Setelah diinstal, navigasikan ke src folder dan buat folder bernama router, diikuti oleh file bernama index.js dalam router folder, yang akan berfungsi sebagai file konfigurasi router kami. Kita src direktori sekarang akan terlihat seperti ini:

Dalam majalah index.js file, mari kita pastikan bahwa kita menempelkan kode di bawah ini, yang merupakan kode konfigurasi router:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

Kami memiliki routes array yang berisi satu objek, yang bisa menjadi beberapa objek di mana setiap objek mewakili satu rute. Untuk saat ini, kami hanya membuat yang akan mengarahkan ulang ke komponen beranda.

Masing-masing routes objek biasanya terdiri dari path, yang merupakan jalur url relatif terhadap root situs, the name, yang berfungsi sebagai pengenal, dan component, yang kami impor di bagian atas halaman.

Selain dari array rute, kami menyiapkan instance router di bagian bawah dengan membuat a createRouter() berfungsi dan meneruskan history nilai kunci dan routes array, dan kemudian kami mengekspor router contoh untuk digunakan dalam aplikasi kita.

Untuk menggunakan konfigurasi router ini dalam aplikasi kami, buka main.js file di src map, import router from "./router", lalu tambahkan .use(router) antara createApp(App) dan .mount('#app') seperti di bawah ini:

import router from './router' createApp(App).use(router).mount('#app')

Kredensial mikro vue-router telah dikonfigurasi secara global dalam aplikasi kita, dan langkah selanjutnya adalah menggunakannya dalam aplikasi kita. Ini mudah dicapai dengan memasukkan <router-view /> dalam App.js tag template, yang hanya merender rute yang cocok:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Menyiapkan Rute Di Vue.js

Rute biasanya dibuat di router/index.js array rute file, dan rute ini terhubung ke komponen. Ini adalah praktik yang baik untuk membuat folder tampilan tempat semua tampilan halaman akan disimpan. Sebagai contoh:

Pada titik ini kita sekarang tahu cara mengatur rute secara manual.

Instal Vue Router Dengan Vue CLI

Jika kita akan membuat proyek baru dan yakin bahwa kita akan memanfaatkan vue-router, lebih mudah untuk melakukannya saat membuat proyek.

Yang harus kita lakukan adalah menggunakan Vue CLI untuk menginstal versi terbaru dari vue-router saat memilih fitur secara manual dalam proses pembuatan proyek kami:

Baca dan pelajari lebih lanjut tentang membuat proyek Vue.js melalui kami Panduan untuk Vue CLI!

Rute Pemuatan Malas Dengan Vue Router

Seiring bertambahnya ukuran aplikasi kami, ukuran bundel bertambah, menyebabkan situs kami membutuhkan waktu lebih lama untuk dimuat. Kita bisa menggunakan vue-router untuk mengimplementasikan pemuatan lambat untuk menghindari pemuatan beberapa rute tertentu hingga pengguna secara khusus memintanya.

Ini biasanya dilakukan dalam file konfigurasi router dengan menghapus: import pernyataan di atas dan menggantinya dengan pernyataan impor dinamis di opsi komponen rute kami:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

Menavigasi Antar Rute Dengan

Sejauh ini, kami telah dapat membuat rute, tetapi bagaimana kami menavigasi dalam aplikasi kami? Kami menggunakan <router-link> tag bukannya <a> elemen dalam HTML untuk menangani perutean.

Misalnya, jika kita ingin membuat bilah navigasi di bagian atas aplikasi kita, kita bisa melakukannya di App.js file di atas <router-view/> tag sehingga ditampilkan di semua rute:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

Router-link menerima to='path' atribut yang membawa pengguna ke jalur komponen seperti yang telah ditetapkan saat mengonfigurasi rute. Ini bekerja seperti href='path``' atribut dalam HTML.

Menggunakan Rute Bernama

Menggunakan rute bernama memungkinkan kami melewati name kunci yang memiliki akses ke name properti yang kami atur saat mengonfigurasi rute alih-alih menggunakan jalur dengan mengikat data dengan cara ini:

<router-link :to="{ name: 'About' }">About</router-link>

Salah satu keuntungan menggunakan metode ini adalah jika kami memutuskan untuk mengubah jalur rute untuk aplikasi besar kami, kami tidak perlu mulai mengubah semua jalur tautan yang mungkin merepotkan.

Perutean Dinamis

Situasi mungkin muncul yang mengharuskan penggunaan perutean dinamis untuk menghindari pengulangan halaman yang tidak perlu. Misalnya, kita memiliki daftar buah dan kita ingin pengguna dapat mengklik buah tertentu dan hanya detail tentang buah itu yang ditampilkan di halaman detail buah. Dalam hal ini, kami menggunakan perutean dinamis.

Kami akan memiliki dua halaman – satu untuk menampilkan buah-buahan dalam daftar dan satu lagi untuk menampilkan detail setiap buah, yang merupakan halaman “cetak biru” untuk diisi dengan detail buah. Kami akan membuat halaman di folder Vue dan kemudian menambahkan rute ke routes Himpunan:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

Kami akan memperhatikan bahwa untuk FruitDetails halaman, kami menambahkan dinamis id properti sehingga mendapat id parameter dan menggunakannya untuk menanyakan data tertentu yang ditampilkan di halaman itu menggunakan $route.params di template kami, sehingga membuat rute menjadi dinamis.

Dalam majalah FruitsPage, misalkan kita memiliki larik buah yang kita lingkari ke dalam aplikasi kita, kita dapat membungkus setiap buah dengan tautan di samping params dengan cara ini:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

Pada titik ini ketika pengguna mengklik setiap buah, itu akan membawa mereka ke FruitDetails halaman di mana kita dapat mengakses id parameter dan menggunakannya untuk mengidentifikasi detail buah mana yang harus ditampilkan di FruitDetails .

Akses Parameter Rute

Sejauh ini kita telah melihat cara menurunkan param ke halaman tertentu secara dinamis, sekarang mari kita lihat bagaimana kita dapat mengakses param itu di FruitDetails halaman. Ada dua cara kita dapat mengakses parameter di Vue – melalui $route.params atau memanfaatkan alat peraga:

Menggunakan $route.params

Parameter dapat diakses langsung melalui $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

Atau kita dapat mengaksesnya di dalam data() metode menggunakan this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Menggunakan Vue Props

Metode lain yang mudah untuk mengakses data secara dinamis melalui rute adalah menggunakan alat peraga. Pertama-tama kita harus mengatur props untuk true di objek konfigurasi rute:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

Dengan cara ini, yang harus kita lakukan selanjutnya adalah menambahkan props opsi ke script tag dan kemudian manfaatkan alat peraga di dalam kami template menandai:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 Kesalahan – Tidak Ada Rute yang Ditemukan

Jika pengguna menavigasi ke rute yang tidak ada, Vue akan memuat halaman tetapi tanpa komponen apa pun, menghasilkan halaman kosong. Dalam hal ini, hal terbaik yang harus dilakukan adalah menampilkan halaman 404 dengan mungkin sebuah tombol yang mengarahkan mereka ke beranda atau ke mana pun kami yakin mereka ingin pergi.

Ini mudah ditangani dengan membuat komponen untuk halaman 404 kami dan kemudian menambahkan rute 404 ke array rute file konfigurasi router kami, tetapi kali ini kami akan menggunakan ekspresi reguler untuk menangkap semua rute yang belum dideklarasikan sebelumnya:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

Grafik :catchAll adalah segmen dinamis yang menerima ekspresi reguler dari (.*) di mana Vue Router digunakan untuk memeriksa apakah rute yang dinavigasi pengguna ditentukan dalam file konfigurasi router kami. Jika rute tersebut tidak ada, pengguna diarahkan ke komponen, yang dalam kasus kami adalah ErrorPage komponen:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Redirects

Dalam situasi di mana kami ingin pengguna dialihkan saat mereka mengunjungi rute tertentu, misalnya, jika kami memiliki rute lama yang tidak lagi kami gunakan, kami ingin pengguna dialihkan ke rute baru saat mereka mengunjungi rute tersebut. Ini mudah dicapai dengan menambahkan objek baru ke array konfigurasi rute kami, dengan a redirect bidang:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

Semua kode di atas lakukan adalah jika pengguna mengunjungi, jalurnya /all-fruits, itu akan mengarahkan mereka ke /fruits rute.

Navigasi Terprogram

Sejauh ini, kita telah belajar banyak tentang perutean, tetapi ada satu hal lagi yang ingin Anda ketahui: cara melakukan navigasi terprogram. Kami mendefinisikan navigasi terprogram sebagai situasi di mana pengguna diarahkan/diarahkan berdasarkan tindakan tertentu yang terjadi pada rute, seperti tindakan masuk atau mendaftar, atau dengan mengklik tombol tertentu, seperti tombol "kembali".

Sejarah Router

Kami dapat menggunakan riwayat browser untuk dengan mudah menavigasi mundur atau maju, tergantung pada preferensi kami. Jika Anda ingat, kami memiliki createRouter() berfungsi dalam file konfigurasi router tempat kami mengatur history value, memungkinkan router Vue untuk melacak riwayat router kami saat kami merutekan melalui aplikasi web.

Ini memungkinkan kita untuk menelusuri riwayat browser, berdasarkan kondisi seperti klik tombol:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

Kami juga dapat memutuskan untuk maju dengan menggunakan 1 alih-alih -1 dan misalkan kita ingin bergerak dengan 2 langkah, kita bisa menggunakan keduanya 2 or -2.

Dorong

push() biasanya digunakan setelah suatu tindakan terjadi dan menambahkan entri baru ke tumpukan riwayat. Misalnya, jika pengguna berhasil masuk, kami ingin dinavigasi ke halaman dasbor secara terprogram. Ini dilakukan dengan memasukkan metode push di samping nama rute:

this.$router.push({ name: 'Dashboard' });

Kesimpulan

Routing adalah salah satu fungsi inti dari Vue. Kecuali Anda sedang membangun Aplikasi Halaman Tunggal (SPA), Anda dapat menghubungkan beberapa laman ke laman landas untuk memungkinkan pengguna menavigasinya.

Dalam panduan ini, kami telah melihat apa itu perutean, bagaimana Anda dapat menginstalnya vue-router dalam proyek baru dan yang sudah ada, cara melakukan pemuatan lambat, menavigasi antar rute, melakukan perutean dinamis, mengakses parameter rute, dan melakukan navigasi terprogram.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://stackabuse.com/guide-to-vue-router/