close

Routing dhe Navigation në Vue .js- Një udhëzues gjithëpërfshirës

Routing dhe Navigation janë koncepte thelbësore në Vue.js për krijimin e faqeve dhe lundrimin ndërmjet tyre në një aplikacion ueb. është një bibliotekë e fuqishme dhe fleksibël për menaxhimin e sistemit në .js. Vue Router routing Vue

 

Këtu janë konceptet themelore që lidhen me route s në Vue.js:

  1. Route: A route përcakton një shteg dhe e lidh atë me një komponent përkatës. Secili route ka një rrugë dhe një komponent.

  2. Vue Router: është një bibliotekë për menaxhimin e s në .js. Ai ofron mjete për të përcaktuar dhe menaxhuar s në një aplikacion. Vue Router route Vue route Vue

  3. Route Komponenti: Secili route ka një komponent përkatës. Kur route aktivizohet a, do të shfaqet komponenti i lidhur.

  4. Dinamik Route: Një dinamik route ju lejon të përcaktoni route s me parametra dinamikë. Për shembull, mund të përcaktoni a route me shtegun "/user/:id" për të shfaqur informacionin e përdoruesit me ID-në përkatëse.

  5. Nested Route: Një mbivendosur route është një koncept që ju lejon të vendosni folenë route e fëmijëve brenda një prindi route. Kjo ju mundëson të ndërtoni route struktura komplekse dhe të organizoni komponentët në një mënyrë të ndërthurur.

  6. Ridrejtimi Route: Një ridrejtim route ju lejon të ridrejtoni përdoruesit nga një rrugë në tjetrën. Kjo është e dobishme kur dëshironi t'i kaloni route përdoruesit nga një rrugë e vjetër në një të re.

  7. Route Roje: Një route roje është një funksion që ju lejon të kontrolloni dhe kontrolloni aksesin në route s. Duke përdorur route mbrojtëse, mund të përcaktoni kushte për të parandaluar përdoruesit të aksesojnë disa route s ose të kryejnë trajtim të veçantë përpara ridrejtimit.

 

Për të përdorur, mund të ndiqni këto hapa: Vue Router

Hapi 1: Instaloni duke përdorur npm ose fije: Vue Router 

npm install vue-router

ose 

yarn add vue-router

Hapi 2: Krijo një skedar në direktorinë rrënjë të projektit. Në këtë skedar, ne do të deklarojmë dhe konfigurojmë s-të e aplikacionit. 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;

Hapi 3: Në main.js skedar, importoni dhe lidhni atë me aplikacionin: 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');

Hapi 4: Në skedar, mund të deklaroni s duke përdorur komponentë të tillë si, , dhe veti të tjera. router.js route Vue Router path component

Për shembull, mund të deklaroni një route për faqen kryesore dhe një route për faqen rreth si më poshtë:

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

Hapi 5: Në Vue komponentët, mund të përdorni komponentë të tillë si për të krijuar lidhje me s të tjera dhe për të shfaqur përmbajtjen e aktuale. <router-link> route <router-view> route

Për shembull, në shabllonin e komponentit Home, mund të përdorni për të krijuar një lidhje me faqen rreth: <router-link> 

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

Në shabllonin e komponentit të aplikacionit, mund të përdorni për të shfaqur përmbajtjen aktuale: <router-view> route 

<router-view></router-view>

Me këto hapa, ju keni konfiguruar dhe përdorur për të menaxhuar dhe në aplikacionin tuaj .js. Vue Router routing navigation Vue