close

Routing dan Navigation dalam Vue .js- Panduan Komprehensif

Routing dan Navigation merupakan konsep penting dalam Vue.js untuk mencipta halaman dan menavigasi antara mereka dalam aplikasi web. ialah perpustakaan yang berkuasa dan fleksibel untuk mengurus sistem dalam .js. Vue Router routing Vue

 

Berikut ialah konsep asas yang berkaitan dengan route s dalam Vue.js:

  1. Route: A route mentakrifkan laluan dan memautkannya kepada komponen yang sepadan. Masing-masing route mempunyai laluan dan komponen.

  2. Vue Router: ialah perpustakaan untuk mengurus s dalam .js. Ia menyediakan alatan untuk mentakrif dan mengurus s dalam aplikasi. Vue Router route Vue route Vue

  3. Route Komponen: Setiap satu route mempunyai komponen yang sepadan. Apabila a route diaktifkan, komponen yang berkaitan akan dipaparkan.

  4. Dinamik Route: Dinamik route membolehkan anda mentakrifkan route s dengan parameter dinamik. Sebagai contoh, anda boleh menentukan a route dengan laluan "/user/:id" untuk memaparkan maklumat pengguna dengan id yang sepadan.

  5. Bersarang Route: Bersarang route ialah konsep yang membolehkan anda menyarangkan anak route dalam ibu bapa route. Ini membolehkan anda membina route struktur yang kompleks dan menyusun komponen secara bersarang.

  6. Ubah hala Route: Ubah hala route membolehkan anda mengubah hala pengguna dari satu laluan ke laluan yang lain. Ini berguna apabila anda mahu route pengguna daripada laluan lama kepada laluan baharu.

  7. Route Pengawal: route Pengawal ialah fungsi yang membolehkan anda menyemak dan mengawal akses kepada route s. Dengan menggunakan route pengawal, anda boleh menentukan syarat untuk menghalang pengguna daripada mengakses route s tertentu atau melakukan pengendalian khas sebelum ubah hala.

 

Untuk menggunakan, anda boleh mengikuti langkah berikut: Vue Router

Langkah 1: Pasang menggunakan npm atau benang: Vue Router 

npm install vue-router

atau 

yarn add vue-router

Langkah 2: Buat fail dalam direktori akar projek. Dalam fail ini, kami akan mengisytiharkan dan mengkonfigurasi s 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 fail, import dan pautkannya 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: Dalam fail, anda boleh mengisytiharkan s menggunakan komponen seperti, , dan sifat lain. router.js route Vue Router path component

Sebagai contoh, anda boleh mengisytiharkan a route untuk halaman utama dan route untuk halaman tentang seperti 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: Dalam Vue komponen, anda boleh menggunakan komponen seperti untuk membuat pautan ke s lain dan untuk memaparkan kandungan semasa. <router-link> route <router-view> route

Contohnya, dalam templat komponen Laman Utama, anda boleh gunakan untuk membuat pautan ke halaman tentang: <router-link> 

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

Dalam templat komponen Apl, anda boleh gunakan untuk memaparkan kandungan semasa: <router-view> route 

<router-view></router-view>

Dengan langkah ini, anda telah menyediakan dan menggunakan untuk mengurus dan dalam aplikasi .js anda. Vue Router routing navigation Vue