close

Routing और .js Navigation में Vue- एक व्यापक मार्गदर्शिका

Routing और वेब एप्लिकेशन में पेज बनाने और उनके बीच नेविगेट करने के लिए .js Navigation में आवश्यक अवधारणाएं हैं । .js में सिस्टम के प्रबंधन के लिए एक शक्तिशाली और लचीली लाइब्रेरी है । Vue Vue Router routing Vue

 

यहां .js route में s से संबंधित मूलभूत अवधारणाएं दी गई हैं: Vue

  1. Route: A route एक पथ को परिभाषित करता है और उसे संबंधित घटक से जोड़ता है। प्रत्येक route का एक पथ और एक घटक है।

  2. Vue Router: .js में s को प्रबंधित करने के लिए एक लाइब्रेरी है । यह किसी एप्लिकेशन में एस को परिभाषित और प्रबंधित करने के लिए उपकरण प्रदान करता है । Vue Router route Vue route Vue

  3. Route घटक: प्रत्येक route का एक संगत घटक होता है। जब a route सक्रिय होता है, तो संबंधित घटक प्रदर्शित होगा।

  4. गतिशील Route: एक गतिशील route आपको route गतिशील मापदंडों के साथ एस को परिभाषित करने की अनुमति देता है। route उदाहरण के लिए, आप संबंधित आईडी के साथ उपयोगकर्ता जानकारी प्रदर्शित करने के लिए पथ "/user/:id" से परिभाषित कर सकते हैं ।

  5. नेस्टेड Route: नेस्टेड route एक अवधारणा है जो आपको route माता-पिता के भीतर बच्चों को नेस्ट करने की अनुमति देती है route । यह आपको जटिल संरचनाएं बनाने route और घटकों को नेस्टेड तरीके से व्यवस्थित करने में सक्षम बनाता है।

  6. रीडायरेक्ट Route: रीडायरेक्ट route आपको उपयोगकर्ताओं को एक पथ से दूसरे पथ पर रीडायरेक्ट करने की अनुमति देता है। यह तब उपयोगी होता है जब आप route उपयोगकर्ताओं को पुराने पथ से नए पथ पर ले जाना चाहते हैं।

  7. Route गार्ड: route गार्ड एक फ़ंक्शन है जो आपको route एस तक पहुंच की जांच और नियंत्रण करने की अनुमति देता है। गार्ड का उपयोग करके route, आप उपयोगकर्ताओं को कुछ विशेष तक पहुंचने से रोकने route या पुनर्निर्देशन से पहले विशेष हैंडलिंग करने के लिए शर्तों को परिभाषित कर सकते हैं।

 

उपयोग करने के लिए, आप इन चरणों का पालन कर सकते हैं: Vue Router

चरण 1: एनपीएम या यार्न का उपयोग करके स्थापित करें: Vue Router 

npm install vue-router

या 

yarn add vue-router

चरण 2: प्रोजेक्ट की रूट डायरेक्टरी में एक फ़ाइल बनाएं । इस फ़ाइल में, हम एप्लिकेशन के एस को घोषित और कॉन्फ़िगर करेंगे। 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: फ़ाइल में main.js, आयात करें और इसे एप्लिकेशन से लिंक करें: 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: फ़ाइल में, आप, और अन्य गुणों जैसे घटकों का उपयोग करके घोषित कर सकते हैं। router.js route Vue Router path component

उदाहरण के लिए, आप route मुख पृष्ठ के लिए a और route परिचय पृष्ठ के लिए a इस प्रकार घोषित कर सकते हैं:

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: घटकों में Vue, आप अन्य घटकों के लिंक बनाने और वर्तमान की सामग्री को प्रदर्शित करने जैसे घटकों का उपयोग कर सकते हैं । <router-link> route <router-view> route

उदाहरण के लिए, होम घटक के टेम्पलेट में, आप इसके बारे में पृष्ठ का लिंक बनाने के लिए इसका उपयोग कर सकते हैं: <router-link> 

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

ऐप घटक के टेम्पलेट में, आप वर्तमान की सामग्री को प्रदर्शित करने के लिए इसका उपयोग कर सकते हैं: <router-view> route 

<router-view></router-view>

इन चरणों के साथ, आपने अपने .js एप्लिकेशन को सेट अप और प्रबंधित करने के लिए उपयोग किया है। Vue Router routing navigation Vue