close

Routing in Navigation v Vue .js – Obsežen vodnik

Routing in Navigation so bistveni pojmi v Vue.js za ustvarjanje strani in krmarjenje med njimi v spletni aplikaciji. je zmogljiva in prilagodljiva knjižnica za upravljanje sistema v .js. Vue Router routing Vue

 

Tukaj so temeljni koncepti, povezani s route s v Vue.js:

  1. Route: A route definira pot in jo poveže z ustrezno komponento. Vsak route ima pot in komponento.

  2. Vue Router: je knjižnica za upravljanje s v .js. Ponuja orodja za definiranje in upravljanje s v aplikaciji. Vue Router route Vue route Vue

  3. Route Komponenta: Vsaka route ima ustrezno komponento. Ko route je a aktiviran, bo prikazana povezana komponenta.

  4. Dinamično Route: Dinamika route vam omogoča, da definirate route s z dinamičnimi parametri. Na primer, lahko definirate route s potjo "/user/:id" za prikaz informacij o uporabniku z ustreznim ID-jem.

  5. Ugnezdeno Route: Ugnezdeno route je koncept, ki omogoča ugnezdenje otrok route znotraj nadrejenega route. To vam omogoča gradnjo kompleksnih route struktur in organizacijo komponent na ugnezdeni način.

  6. Preusmeritev Route: Preusmeritev route vam omogoča preusmeritev uporabnikov z ene poti na drugo. To je uporabno, če želite route uporabnike preusmeriti s stare poti na novo.

  7. Route Stražar: Stražar route je funkcija, ki vam omogoča preverjanje in nadzor dostopa do route s. Z uporabo route varoval lahko definirate pogoje, ki uporabnikom preprečujejo dostop do določenih route ali izvedete posebno obravnavo pred preusmeritvijo.

 

Za uporabo sledite tem korakom: Vue Router

1. korak: Namestite z uporabo npm ali yarn: Vue Router 

npm install vue-router

oz 

yarn add vue-router

2. korak: ustvarite datoteko v korenskem imeniku projekta. V tej datoteki bomo deklarirali in konfigurirali 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;

3. korak: main.js uvozite datoteko in jo povežite z aplikacijo: 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');

4. korak: V datoteki lahko deklarirate z uporabo komponent, kot so, in druge lastnosti. router.js route Vue Router path component

Na primer, lahko deklarirate a route za domačo stran in a route za stran o tem, kot sledi:

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

5. korak: V Vue komponentah lahko uporabite komponente, na primer za ustvarjanje povezav do drugih in za prikaz vsebine trenutnega. <router-link> route <router-view> route

Na primer, v predlogi komponente Domov lahko uporabite za ustvarjanje povezave do strani o tem: <router-link> 

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

V predlogi komponente aplikacije lahko uporabite za prikaz vsebine trenutnega: <router-view> route 

<router-view></router-view>

S temi koraki ste nastavili in uporabljali za upravljanje in v svoji aplikaciji .js. Vue Router routing navigation Vue