Vue Router परिचय
Vue Router Vue.js (व्यू जेएस) के लिए आधिकारिक रूटिंग लाइब्रेरी है, जो सिंगल-पेज एप्लिकेशन (SPA) में विभिन्न व्यू और कंपोनेंट्स के बीच नेविगेशन सक्षम करती है। इसका महत्व इसलिए है क्योंकि यह डेवलपर्स को बिना पूरे पेज को रीफ़्रेश किए, अलग-अलग पेज कंटेंट दिखाने की सुविधा देता है, जिससे एप्लिकेशन की परफॉर्मेंस और यूजर एक्सपीरियंस बेहतर होती है।
Vue Router का उपयोग तब किया जाता है जब आपकी एप्लिकेशन में कई व्यू या पेज हों, जैसे डैशबोर्ड, यूज़र प्रोफाइल या ई-कॉमर्स प्रोडक्ट पेज। प्रत्येक URL पथ को एक विशेष कंपोनेंट से मैप किया जा सकता है। Vue Router डायनामिक रूट्स, नेस्टेड रूट्स और नेविगेशन गार्ड्स सपोर्ट करता है, जिससे नेविगेशन लॉजिक और कंपोनेंट लॉजिक को अलग और साफ-सुथरा रखा जा सकता है।
इस ट्यूटोरियल के माध्यम से आप Vue.js (व्यू जेएस) के बेसिक कॉन्सेप्ट जैसे कंपोनेंट सिंटैक्स, डेटा स्ट्रक्चर, रूटिंग एल्गोरिदम और ऑब्जेक्ट ओरिएंटेड प्रिंसिपल्स सीखेंगे। अंत में आप सरल रूट सेटअप करना, डायनामिक पथ का उपयोग करना, और कंपोनेंट्स के बीच प्रॉप्स पास करना सीखेंगे।
मूल उदाहरण
textimport { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = { template: '<h2>होम पेज</h2>' }
const About = { template: '<h2>हमारे बारे में</h2>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')इस उदाहरण में हमने createApp और createRouter, createWebHistory को इम्पोर्ट किया। Home और About नामक दो बेसिक कंपोनेंट्स बनाए गए हैं, जिनमें सरल टेम्पलेट्स हैं।
routes array में URL पथ और कंपोनेंट को मैप किया गया है। createRouter द्वारा एक Router instance बनाया गया है, जो createWebHistory का उपयोग करता है ताकि SPA नेविगेशन बिना पेज रीलोड के संभव हो। app.use(router) के माध्यम से Router एप्लिकेशन में जोड़ा गया और app.mount('#app') से DOM में रेंडर किया गया।
यह उदाहरण Vue Router के बेसिक कॉन्सेप्ट को दिखाता है: रूट्स डिफाइन करना, पथ को कंपोनेंट से जोड़ना, Router इनिशियलाइज करना और एप्लिकेशन में इंटीग्रेट करना।
व्यावहारिक उदाहरण
textimport { createApp, defineComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
const Home = defineComponent({
template: '<div><h2>होम पेज</h2><p>आपका स्वागत है!</p></div>'
})
const Profile = defineComponent({
props: ['username'],
template: '<div><h2>प्रोफाइल</h2><p>नमस्ते, {{ username }}!</p></div>'
})
const routes = [
{ path: '/', component: Home },
{ path: '/profile/:username', component: Profile, props: true }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp({})
app.use(router)
app.mount('#app')इस उदाहरण में defineComponent का उपयोग किया गया है। Profile कंपोनेंट props के माध्यम से username प्राप्त करता है, जो URL से डायनामिकली लिया जाता है। Route '/profile/:username' डायनामिक रूट का उदाहरण है।
यह रियल-वर्ल्ड एप्लिकेशन में यूज़र प्रोफाइल या पर्सनलाइज़्ड कंटेंट दिखाने में उपयोगी है। props के उपयोग से कंपोनेंट्स मॉड्यूलर और मेंटेन करने योग्य रहते हैं।
Vue Router के लिए बेस्ट प्रैक्टिस में साफ़ रूट स्ट्रक्चर, props के माध्यम से डेटा पास करना और URL पैरामीटर का डायरेक्ट मैनिपुलेशन न करना शामिल है। आम गलतियाँ हैं: अस्पष्ट रूट्स, कंपोनेंट स्टेट मैनेजमेंट खराब होना या बड़े कंपोनेंट्स जिससे मेमोरी लीक और परफॉर्मेंस इश्यूज।
Debugging Vue DevTools से किया जा सकता है। परफॉर्मेंस ऑप्टिमाइजेशन के लिए Lazy Loading, Navigation Guards और इफिशिएंट रूट एल्गोरिदम उपयोग करें। सुरक्षा के लिए URL पैरामीटर को वेलिडेट और एस्केप करना आवश्यक है।
📊 संदर्भ तालिका
| Vue.js (व्यू जेएस) Element/Concept | Description | Usage Example |
|---|---|---|
| Router | एप्लिकेशन के सभी रूट्स को मैनेज करता है | const router = createRouter({ history: createWebHistory(), routes }) |
| Route | URL पथ को कंपोनेंट से जोड़ता है | { path: '/about', component: About } |
| Props | URL पैरामीटर को कंपोनेंट में पास करता है | { path: '/profile/:username', component: Profile, props: true } |
| createWebHistory | SPA नेविगेशन के लिए History API सक्षम करता है | history: createWebHistory() |
| Navigation Guards | नेविगेशन के दौरान एक्सेस को कंट्रोल करता है | router.beforeEach((to, from, next) => { next() }) |
Vue Router सीखने के बाद आप डायनामिक रूट्स, props के माध्यम से डेटा पास करना और नेविगेशन कंट्रोल कर पाएंगे। इससे आप SPA एप्लिकेशन में बेहतर यूज़र एक्सपीरियंस दे सकते हैं। आगे आप Lazy Loading, नेस्टेड रूट्स और Navigation Guards को सीखकर परफॉर्मेंस और सुरक्षा बढ़ा सकते हैं।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी