close

Routing na Navigation katika Vue .js- Mwongozo wa Kina

Routing na Navigation ni dhana muhimu katika Vue.js kwa ajili ya kuunda kurasa na kuabiri kati yao katika programu ya wavuti. ni maktaba yenye nguvu na rahisi ya kudhibiti mfumo katika .js. Vue Router routing Vue

 

Hapa kuna dhana za kimsingi zinazohusiana na route s in Vue.js:

  1. Route: A route hufafanua njia na kuiunganisha na sehemu inayolingana. Kila moja route ina njia na sehemu.

  2. Vue Router: ni maktaba ya kudhibiti s in .js. Inatoa zana za kufafanua na kudhibiti s katika programu. Vue Router route Vue route Vue

  3. Route Sehemu: Kila moja route ina sehemu inayolingana. Wakati a route imeamilishwa, sehemu inayohusishwa itaonyeshwa.

  4. Nguvu Route: Nguvu route inakuruhusu kufafanua route s na vigezo vinavyobadilika. Kwa mfano, unaweza kufafanua route na njia "/user/:id" ili kuonyesha maelezo ya mtumiaji na kitambulisho sambamba.

  5. Nested Route: Nested route ni dhana inayokuruhusu kuweka mtoto route ndani ya mzazi route. Hii hukuwezesha kujenga route miundo changamano na kupanga vipengele kwa namna ya kiota.

  6. Elekeza kwingine Route: Kuelekeza kwingine route hukuruhusu kuelekeza watumiaji upya kutoka njia moja hadi nyingine. Hii ni muhimu unapotaka route watumiaji kutoka kwa njia ya zamani hadi mpya.

  7. Route Mlinzi: route Mlinzi ni kazi ambayo hukuruhusu kuangalia na kudhibiti ufikiaji wa route s. Kwa kutumia route walinzi, unaweza kufafanua masharti ili kuzuia watumiaji kufikia route s fulani au kufanya utunzaji maalum kabla ya kuelekeza kwingine.

 

Ili kutumia, unaweza kufuata hatua hizi: Vue Router

Hatua ya 1: Sakinisha kwa kutumia npm au uzi: Vue Router 

npm install vue-router

au 

yarn add vue-router

Hatua ya 2: Unda faili kwenye saraka ya mizizi ya mradi. Katika faili hii, tutatangaza na kusanidi s ya programu. 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;

Hatua ya 3: Katika main.js faili, leta na uiunganishe na programu: 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');

Hatua ya 4: Katika faili, unaweza kutangaza kwa kutumia vipengele kama vile, , na sifa nyinginezo. router.js route Vue Router path component

Kwa mfano, unaweza kutangaza a route kwa ukurasa wa nyumbani na route kwa ukurasa wa kuhusu kama ifuatavyo:

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

Hatua ya 5: Katika Vue vipengee, unaweza kutumia vipengele kama vile kuunda viungo vya s nyingine, na kuonyesha maudhui ya sasa. <router-link> route <router-view> route

Kwa mfano, katika kiolezo cha kipengele cha Nyumbani, unaweza kutumia kuunda kiungo cha ukurasa wa kuhusu: <router-link> 

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

Katika kiolezo cha kipengele cha Programu, unaweza kutumia kuonyesha maudhui ya sasa: <router-view> route 

<router-view></router-view>

Kwa hatua hizi, umeweka na kutumia kudhibiti na katika programu yako ya .js. Vue Router routing navigation Vue