Vue राउटर का उपयोग करके अपने Vue एप्लिकेशन के लिए एक मजबूत रूटिंग सिस्टम सेट करें।

Vue राउटर, Vue का आधिकारिक राउटर, Vue में सिंगल-पेज एप्लिकेशन (SPAs) बनाना संभव बनाता है। Vue राउटर आपको अपने वेब ऐप के घटकों को विभिन्न ब्राउज़र रूटों पर मैप करने, आपके ऐप के इतिहास स्टैक को प्रबंधित करने और उन्नत रूटिंग विकल्प सेट करने की सुविधा देता है।

Vue राउटर के साथ शुरुआत करना

Vue राउटर के साथ आरंभ करने के लिए, निम्नलिखित चलाएँ एनपीएम (नोड पैकेज मैनेजर) अपना Vue एप्लिकेशन बनाने के लिए अपनी पसंदीदा निर्देशिका में कमांड करें:

npm create vue

जब पूछा गया कि क्या Vue राउटर जोड़ना है एकल पृष्ठ अनुप्रयोग विकास, चयन करें हाँ.

इसके बाद, अपने प्रोजेक्ट को अपने पसंदीदा टेक्स्ट एडिटर में खोलें। आपके ऐप का स्रोत निर्देशिका में एक शामिल होना चाहिए रूटर फ़ोल्डर.

रूटर फ़ोल्डर हाउस ए सूचकांक.जे.एस आपके एप्लिकेशन में मार्गों को संभालने के लिए जावास्क्रिप्ट कोड वाली फ़ाइल। सूचकांक.जे.एस फ़ाइल दो फ़ंक्शंस आयात करती है व्यू-राउटर पैकेट: क्रिएटराउटर और वेबइतिहास बनाएं.

क्रिएटराउटर फ़ंक्शन किसी ऑब्जेक्ट से एक नया रूट कॉन्फ़िगरेशन बनाता है। इस ऑब्जेक्ट में शामिल है

instagram viewer
इतिहास और मार्ग चाबियाँ और उनके मूल्य। मार्ग कुंजी प्रत्येक मार्ग के कॉन्फ़िगरेशन का विवरण देने वाली वस्तुओं की एक सरणी है, जैसा कि उपरोक्त छवि में देखा गया है।

अपने मार्गों को कॉन्फ़िगर करने के बाद, आपको इसे निर्यात करना होगा रूटर इंस्टेंस और इस इंस्टेंस को इसमें आयात करें मुख्य.जे.एस फ़ाइल:

import'./assets/main.css'
import { createApp } from'vue'
import App from'./App.vue'
import router from'./router'


const app = createApp(App)


app.use(router)
app.mount('#app')

आपने आयात किया रूटर में कार्य करें मुख्य.जे.एस फ़ाइल और फिर अपने Vue ऐप को इस राउटर फ़ंक्शन का उपयोग करने दें उपयोग तरीका।

फिर आप नीचे दिए गए समान कोड ब्लॉक को संरचित करके अपने रूट को अपने Vue ऐप पर लागू कर सकते हैं: