close

Routing u Navigation f'.js Vue- Gwida Komprensiva

Routing u Navigation huma kunċetti essenzjali f'.js Vue għall-ħolqien ta' paġni u n-navigazzjoni bejniethom f'applikazzjoni tal-web. hija librerija b'saħħitha u flessibbli għall-ġestjoni tas- sistema f'.js. Vue Router routing Vue

 

Hawn huma l-kunċetti fundamentali relatati ma route 's f'.js Vue:

  1. Route: A route jiddefinixxi mogħdija u jgħaqqadha ma' komponent korrispondenti. Kull wieħed route għandu mogħdija u komponent.

  2. Vue Router: hija librerija għall-ġestjoni s f'.js. Jipprovdi għodod biex jiddefinixxu u jimmaniġġjaw s f'applikazzjoni. Vue Router route Vue route Vue

  3. Route Komponent: Kull wieħed route għandu komponent korrispondenti. Meta a route jiġi attivat, il-komponent assoċjat se jintwera.

  4. Dinamika Route: Dinamika route tippermettilek tiddefinixxi route s b'parametri dinamiċi. Pereżempju, tista' tiddefinixxi a route bit-triq "/user/:id" biex turi l-informazzjoni tal-utent bl-id korrispondenti.

  5. Nedjati Route: A nested route huwa kunċett li jippermettilek li jbejtu tfal route fi ħdan ġenitur route. Dan jippermettilek tibni route strutturi kumplessi u torganizza komponenti b'mod ibbed.

  6. Direzzjoni mill-ġdid Route: Direzzjoni mill-ġdid route tippermettilek tidderieġi mill-ġdid lill-utenti minn triq għal oħra. Dan huwa utli meta inti tixtieq li route l-utenti minn triq qadima għal waħda ġdida.

  7. Route Gwardja: Gwardja route hija funzjoni li tippermettilek tiċċekkja u tikkontrolla l-aċċess għal route s. Billi tuża route gwardji, tista 'tiddefinixxi kundizzjonijiet biex tipprevjeni lill-utenti milli jaċċessaw ċerti route s jew iwettqu tqandil speċjali qabel id-direzzjoni mill-ġdid.

 

Biex tuża, tista 'ssegwi dawn il-passi: Vue Router

Pass 1: Installa billi tuża npm jew ħjut: Vue Router 

npm install vue-router

jew 

yarn add vue-router

Pass 2: Oħloq fajl fid-direttorju tal-għeruq tal-proġett. F'dan il-fajl, aħna se niddikjaraw u kkonfigurat l- i tal-applikazzjoni. 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;

Pass 3: Fil- main.js fajl, importazzjoni u għaqqadha mal- applikazzjoni: 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');

Pass 4: Fil- fajl, tista 'tiddikjara s billi tuża komponenti bħal, , u proprjetajiet oħra. router.js route Vue Router path component

Pereżempju, tista' tiddikjara a route għall-home page u a route għall-paġna dwar kif ġej:

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

Pass 5: Fil- Vue komponenti, tista 'tuża komponenti bħal biex toħloq links għal s oħra, u biex turi l-kontenut tal-kurrent. <router-link> route <router-view> route

Per eżempju, fil-mudell tal-komponent Home, tista 'tuża biex toħloq link għall-paġna dwar: <router-link> 

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

Fil-mudell tal-komponent App, tista 'tuża biex turi l-kontenut tal-kurrent: <router-view> route 

<router-view></router-view>

B'dawn il-passi, inti waqqaft u użajt biex timmaniġġja u fl-applikazzjoni .js tiegħek. Vue Router routing navigation Vue