close

Routing și Navigation în Vue .js- Un ghid cuprinzător

Routing și Navigation sunt concepte esențiale în Vue.js pentru crearea paginilor și navigarea între ele într-o aplicație web. este o bibliotecă puternică și flexibilă pentru gestionarea sistemului în .js. Vue Router routing Vue

 

Iată conceptele fundamentale legate de route s în Vue.js:

  1. Route: A route definește o cale și o leagă de o componentă corespunzătoare. Fiecare route are o cale și o componentă.

  2. Vue Router: este o bibliotecă pentru gestionarea fișierelor în .js. Oferă instrumente pentru definirea și gestionarea elementelor într-o aplicație. Vue Router route Vue route Vue

  3. Route Componentă: Fiecare route are o componentă corespunzătoare. Când a route este activat, componenta asociată va fi afișată.

  4. Dinamic Route: O dinamică route vă permite să definiți route s cu parametri dinamici. De exemplu, puteți defini un route cu calea „/user/:id” pentru a afișa informații despre utilizator cu id-ul corespunzător.

  5. Imbricat Route: Un imbricat route este un concept care vă permite să imbricați copii route într-un părinte route. Acest lucru vă permite să construiți route structuri complexe și să organizați componente într-un mod imbricat.

  6. Redirecționare Route: o redirecționare route vă permite să redirecționați utilizatorii de la o cale la alta. Acest lucru este util atunci când doriți să route treceți de la o cale veche la una nouă.

  7. Route Pază: o route gardă este o funcție care vă permite să verificați și să controlați accesul la route s. Folosind route gărzi, puteți defini condiții pentru a împiedica utilizatorii să acceseze anumite route elemente sau să efectueze o manipulare specială înainte de redirecționare.

 

Pentru a utiliza, puteți urma acești pași: Vue Router

Pasul 1: Instalați folosind npm sau fire: Vue Router 

npm install vue-router

sau 

yarn add vue-router

Pasul 2: Creați un fișier în directorul rădăcină al proiectului. În acest fișier, vom declara și configura e- urile aplicației. 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;

Pasul 3: În main.js fișier, importați și conectați-l la aplicație: 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');

Pasul 4: În fișier, puteți declara s folosind componente precum, , și alte proprietăți. router.js route Vue Router path component

De exemplu, puteți declara a route pentru pagina de pornire și a route pentru pagina despre, după cum urmează:

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

Pasul 5: În Vue componente, puteți utiliza componente cum ar fi pentru a crea link-uri către alte elemente și pentru a afișa conținutul actualului. <router-link> route <router-view> route

De exemplu, în șablonul componentei Acasă, puteți utiliza pentru a crea un link către pagina despre: <router-link> 

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

În șablonul componentei App, puteți utiliza pentru a afișa conținutul actualului: <router-view> route 

<router-view></router-view>

Cu acești pași, ați configurat și utilizat pentru a gestiona și în aplicația dvs. .js. Vue Router routing navigation Vue