Vue.js में रूटिंग को समझना

वेब एप्लिकेशन विकास में रूटिंग एक आवश्यक सुविधा है। Vue.js में, हम पृष्ठों के बीच नेविगेशन को आसानी से प्रबंधित करने के लिए Vue राउटर का उपयोग कर सकते हैं। इस पोस्ट में, हम जानेंगे कि Vue.js एप्लिकेशन में रूटिंग कैसे सेट करें।

व्यू राउटर क्या है?

Vue.js अनुप्रयोगों में रूटिंग के प्रबंधन के लिए Vue राउटर आधिकारिक लाइब्रेरी है। Vue राउटर के साथ, हम सिंगल-पेज एप्लिकेशन (एसपीए) बना सकते हैं जो पेज को पुनः लोड किए बिना सुचारू नेविगेशन की अनुमति देता है।

व्यू राउटर स्थापित करना

सबसे पहले, हमें Vue राउटर इंस्टॉल करना होगा। यदि आप Vue CLI का उपयोग कर रहे हैं, तो आप एक नया प्रोजेक्ट बनाते समय इसे इंस्टॉल करना चुन सकते हैं। यदि नहीं, तो आप इसे निम्नलिखित कमांड से इंस्टॉल कर सकते हैं:

npm install vue-router

Vue राउटर की स्थापना

इंस्टॉलेशन के बाद, हमें Vue राउटर को कॉन्फ़िगर करना होगा। इसे स्थापित करने के बुनियादी चरण यहां दिए गए हैं:

• एक राउटर फ़ाइल बनाएं Src फ़ोल्डर के अंदर राउटर.जेएस नामक एक नई फ़ाइल बनाएं: 'Vue' से Vue आयात करें; 'व्यू-राउटर' से राउटर आयात करें; './views/Home.vue' से होम आयात करें; './views/About.vue' से 'के बारे में' आयात करें;

Vue.use(Router);

export default new Router({
  mode: 'history', // Using history mode for cleaner URLs
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

• राउटर को एप्लिकेशन में एकीकृत करें इसके बाद, हमें राउटर को अपने Vue इंस्टेंस में एकीकृत करने की आवश्यकता है। Main.js फ़ाइल को इस प्रकार संपादित करें:

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  el: '#app',
  router, // Add the router to the Vue instance
  render: h => h(App),
});

• राउटर लिंक का उपयोग करना पृष्ठों के बीच नेविगेट करने के लिए, हम घटक का उपयोग करते हैं। App.vue फ़ाइल में इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

• नए पेज बनाना अब, आइए दो घटक बनाएं जिनका हम उपयोग करेंगे: Home.vue और About.vue।

होम.व्यू:

के बारे में.vue:

अब आप अपना एप्लिकेशन कमांड के साथ चला सकते हैं:

npm run serve

अपना ब्राउज़र खोलें और http://localhost:8080 पर जाएं। रूटिंग कैसे काम करती है यह देखने के लिए होम और अबाउट लिंक पर क्लिक करने का प्रयास करें!

निष्कर्ष

इस पोस्ट में, हमने Vue राउटर का उपयोग करके Vue.js में रूटिंग की मूल बातें शामिल की हैं। इस रूटिंग क्षमता के साथ, आप अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल एप्लिकेशन बना सकते हैं। अगली पोस्ट में, हम Vue राउटर की अधिक उन्नत सुविधाओं, जैसे रूट पैरामीटर और नेस्टेड रूट के बारे में विस्तार से जान सकते हैं।

मुझे आशा है कि आपको यह पोस्ट उपयोगी लगी होगी! यदि आपका कोई प्रश्न हो तो बेझिझक टिप्पणी छोड़ें।