close

Routing dan Navigation di Vue .js- Panduan Komprehensif

Routing dan Navigation merupakan konsep penting dalam Vue.js untuk membuat halaman dan menavigasi di antaranya dalam aplikasi web. adalah perpustakaan yang kuat dan fleksibel untuk mengelola sistem di .js. Vue Router routing Vue

 

Berikut adalah konsep dasar yang terkait dengan route s di Vue.js:

  1. Route: A route mendefinisikan jalur dan menautkannya ke komponen yang sesuai. Masing-masing route memiliki jalur dan komponen.

  2. Vue Router: adalah perpustakaan untuk mengelola s di .js. Ini menyediakan alat untuk mendefinisikan dan mengelola s dalam aplikasi. Vue Router route Vue route Vue

  3. Route Komponen: Masing-masing route memiliki komponen yang sesuai. Saat a route diaktifkan, komponen terkait akan ditampilkan.

  4. Dinamis Route: Dinamis route memungkinkan Anda untuk menentukan route s dengan parameter dinamis. Misalnya, Anda dapat menentukan a route dengan jalur "/user/:id" untuk menampilkan informasi pengguna dengan id yang sesuai.

  5. Bersarang Route: Bersarang route adalah konsep yang memungkinkan Anda membuat sarang anak route di dalam induk route. Ini memungkinkan Anda untuk membangun route struktur yang kompleks dan mengatur komponen dengan cara bersarang.

  6. Pengalihan Route: Pengalihan route memungkinkan Anda mengalihkan pengguna dari satu jalur ke jalur lainnya. Ini berguna saat Anda ingin route pengguna dari jalur lama ke jalur baru.

  7. Route Penjaga: Penjaga route adalah fungsi yang memungkinkan Anda untuk memeriksa dan mengontrol akses ke route s. Dengan menggunakan route penjaga, Anda dapat menentukan kondisi untuk mencegah pengguna mengakses route s tertentu atau melakukan penanganan khusus sebelum pengalihan.

 

Untuk menggunakan, Anda dapat mengikuti langkah-langkah berikut: Vue Router

Langkah 1: Instal menggunakan npm atau benang: Vue Router 

npm install vue-router

atau 

yarn add vue-router

Langkah 2: Buat file di direktori root proyek. Dalam file ini, kami akan mendeklarasikan dan mengonfigurasi aplikasi. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

Langkah 3: Dalam main.js file, impor dan tautkan ke aplikasi: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

Langkah 4: Di dalam file, Anda dapat mendeklarasikan s menggunakan komponen seperti, , dan properti lainnya. router.js route Vue Router path component

Misalnya, Anda dapat mendeklarasikan a route untuk halaman beranda dan route untuk halaman tentang sebagai berikut:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

Langkah 5: Di Vue komponen, Anda dapat menggunakan komponen seperti membuat tautan ke s lain, dan untuk menampilkan konten saat ini. <router-link> route <router-view> route

Misalnya, di templat komponen Beranda, Anda dapat menggunakan untuk membuat tautan ke halaman tentang: <router-link> 

<router-link to="/about">Go to About</router-link>

Di templat komponen Aplikasi, Anda dapat menggunakan untuk menampilkan konten saat ini: <router-view> route 

<router-view></router-view>

Dengan langkah-langkah ini, Anda telah menyiapkan dan menggunakan untuk mengelola dan di aplikasi .js Anda. Vue Router routing navigation Vue