close

Routing i Navigation u Vue .js- Sveobuhvatni vodič

Routing i Navigation osnovni su koncepti u Vue.js za stvaranje stranica i navigaciju između njih u web aplikaciji. je moćna i fleksibilna biblioteka za upravljanje sustavom u .js. Vue Router routing Vue

 

Ovdje su temeljni koncepti vezani za route s u Vue.js:

  1. Route: A route definira stazu i povezuje je s odgovarajućom komponentom. Svaki route ima put i komponentu.

  2. Vue Router: je biblioteka za upravljanje s u .js. Omogućuje alate za definiranje i upravljanje s u aplikaciji. Vue Router route Vue route Vue

  3. Route Komponenta: svaka route ima odgovarajuću komponentu. Kada route je a aktivirano, bit će prikazana povezana komponenta.

  4. Dinamički Route: Dinamički route vam omogućuje da definirate route s s dinamičkim parametrima. Na primjer, možete definirati route stazom "/user/:id" za prikaz informacija o korisniku s odgovarajućim ID-om.

  5. Ugniježđeno Route: Ugniježđeno route je koncept koji vam omogućuje da ugniježdite dijete route unutar roditelja route. To vam omogućuje da izgradite složene route strukture i organizirate komponente na ugniježđeni način.

  6. Preusmjeravanje Route: Preusmjeravanje route vam omogućuje preusmjeravanje korisnika s jednog puta na drugi. Ovo je korisno kada želite route korisnike prebaciti sa stare staze na novu.

  7. Route Stražar: route Stražar je funkcija koja vam omogućuje provjeru i kontrolu pristupa s route. Korištenjem route zaštitnika možete definirati uvjete za sprječavanje korisnika da pristupe određenim route s ili izvršiti posebno rukovanje prije preusmjeravanja.

 

Za korištenje možete slijediti ove korake: Vue Router

Korak 1: Instalirajte pomoću npm-a ili pređe: Vue Router 

npm install vue-router

ili 

yarn add vue-router

Korak 2: Stvorite datoteku u korijenskom direktoriju projekta. U ovoj datoteci ćemo deklarirati i konfigurirati s aplikacije. 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;

Korak 3: main.js Uvezite datoteku i povežite je s aplikacijom: 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');

Korak 4: U datoteci možete deklarirati pomoću komponenti kao što su, , i druga svojstva. router.js route Vue Router path component

Na primjer, možete deklarirati a route za početnu stranicu i a route za stranicu o stranici na sljedeći način:

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

Korak 5: U Vue komponentama možete koristiti komponente poput stvaranja veza na druge i za prikaz sadržaja trenutnog. <router-link> route <router-view> route

Na primjer, u predlošku početne komponente možete upotrijebiti za stvaranje veze na stranicu o stranici: <router-link> 

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

U predlošku komponente aplikacije možete koristiti za prikaz sadržaja trenutnog: <router-view> route 

<router-view></router-view>

Ovim ste koracima postavili i koristili upravljanje i u svojoj .js aplikaciji. Vue Router routing navigation Vue