गाइड टू व्यू राउटर

परिचय

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

रूटिंग वह प्रक्रिया है जिसके द्वारा उपयोगकर्ता को वेबसाइट के विभिन्न पृष्ठों पर नेविगेट किया जाता है। Vue.js एक जावास्क्रिप्ट ढांचा है जिसका उपयोग सिंगल पेज ऐप्स बनाने के लिए किया जाता है, जिसका अर्थ है कि यह एप्लिकेशन सर्वर से ब्राउज़र में केवल एक बार लोड होता है, और रूटिंग के दौरान ब्राउज़र को पुनः लोड करने की आवश्यकता नहीं होती है; इसके बजाय, यह केवल इन पृष्ठों का अनुरोध करता है और वे लोड हो जाते हैं।

इस गाइड में, हम सीखेंगे कि Vue.js के साथ रूटिंग कैसे करें और विभिन्न प्रकार की रूटिंग में गहराई से गोता लगाएँ जो कि की जा सकती हैं और उन्हें कैसे किया जा सकता है।

Getting Started

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

मौजूदा प्रोजेक्ट में Vue राउटर सेटअप करें

घालमेल vue-router एक मौजूदा परियोजना में तकनीकी हो सकता है, और हम अब इन विवरणों पर जाएंगे। पहला कदम निम्नलिखित कमांड का उपयोग करके वू राउटर पैकेज को स्थापित करना होगा:

! npm install vue-router@4

एक बार स्थापित होने के बाद, नेविगेट करें src फ़ोल्डर और एक फ़ोल्डर बनाएँ जिसे कहा जाता है router, उसके बाद एक फ़ाइल जिसका नाम है index.js में router फ़ोल्डर, जो हमारे राउटर कॉन्फ़िगरेशन फ़ाइल के रूप में काम करेगा। हमारी src निर्देशिका अब इस तरह दिखेगी:

में index.js फ़ाइल, आइए सुनिश्चित करें कि हम नीचे दिए गए कोड को पेस्ट करते हैं, जो राउटर कॉन्फ़िगरेशन कोड है:

import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue' const routes = [ { path: '/', name: 'home', component: HomePage },
] const router = createRouter({ history: createWebHashHistory(), routes
})
export default router

हम एक है routes सरणी जिसमें एक एकल वस्तु होती है, जो कई वस्तुएँ हो सकती हैं जहाँ प्रत्येक वस्तु एक ही मार्ग का प्रतिनिधित्व करती है। कुछ समय के लिए, हमने केवल वही बनाया है जो मुखपृष्ठ घटक पर पुनर्निर्देशित करेगा।

इनमें से प्रत्येक routes वस्तुएं आमतौर पर से बनी होती हैं path, जो साइट के रूट के सापेक्ष url पथ है, name, जो एक पहचानकर्ता के रूप में कार्य करता है, और component, जिसे हमने पृष्ठ के शीर्ष पर आयात किया था।

रूट एरे के अलावा, हम राउटर इंस्टेंस को सबसे नीचे बनाकर सेट करते हैं a createRouter() समारोह और में गुजर रहा है history प्रमुख मूल्य और routes सरणी, और फिर हम निर्यात करते हैं router हमारे आवेदन के भीतर उपयोग के लिए उदाहरण।

हमारे एप्लिकेशन के भीतर इस राउटर कॉन्फ़िगरेशन का उपयोग करने के लिए, खोलें main.js में दायर src फ़ोल्डर, import router from "./router", और फिर जोड़ें .use(router) के बीच createApp(App) और .mount('#app') जैसा कि यह नीचे है:

import router from './router' createApp(App).use(router).mount('#app')

इस vue-router हमारे एप्लिकेशन के भीतर विश्व स्तर पर कॉन्फ़िगर किया गया है, और अगला चरण हमारे एप्लिकेशन के भीतर इसका उपयोग करना है। इसे शामिल करके आसानी से पूरा किया जाता है <router-view /> के अंदर App.js टेम्प्लेट टैग, जो केवल मिलान किए गए मार्ग को प्रस्तुत करता है:

<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route --> <router-view /> <!-- Any code placed here is going to be fixed -->
</template> <script> export default { name: 'App', }
</script>

Vue.js . में रूट सेट करना

मार्ग आमतौर पर में बनाए जाते हैं router/index.js फ़ाइल के मार्ग सरणी, और ये मार्ग घटकों से जुड़ते हैं। दृश्य फ़ोल्डर बनाना एक अच्छा अभ्यास है जहां सभी पृष्ठ दृश्य संग्रहीत किए जाएंगे। उदाहरण के लिए:

इस बिंदु पर अब हम जानते हैं कि मैन्युअल रूप से मार्ग कैसे सेट करें।

Vue CLI के साथ Vue राउटर इंस्टाल करें

यदि हम एक नया प्रोजेक्ट बनाने वाले हैं और विश्वास करते हैं कि हम इसका उपयोग करेंगे vue-router, प्रोजेक्ट बनाते समय ऐसा करना आसान होता है।

हमें केवल के नवीनतम संस्करण को स्थापित करने के लिए Vue CLI का उपयोग करना है vue-router हमारी परियोजना बनाने की प्रक्रिया में मैन्युअल रूप से सुविधाओं का चयन करते समय:

हमारे द्वारा Vue.js प्रोजेक्ट बनाने के बारे में पढ़ें और जानें Vue CLI के लिए गाइड!

Vue राउटर के साथ आलसी लोडिंग रूट

जैसे-जैसे हमारा एप्लिकेशन आकार में बढ़ता है, बंडल का आकार बढ़ता है, जिससे हमारी साइट को लोड होने में अधिक समय लगता है। हम प्रयोग कर सकते हैं vue-router कुछ विशिष्ट मार्गों को लोड करने से बचने के लिए आलसी लोडिंग को लागू करने के लिए जब तक उपयोगकर्ता विशेष रूप से उनसे अनुरोध नहीं करता।

यह आमतौर पर राउटर कॉन्फ़िगरेशन फ़ाइल में को हटाकर पूरा किया जाता है import शीर्ष पर विवरण और इसे हमारे मार्ग के घटक विकल्प में एक गतिशील आयात विवरण के साथ बदलना:

import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "home" */ '../views/HomePage.vue'), }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'), },
];
const router = createRouter({ history: createWebHashHistory(), routes,
});
export default router;

के साथ मार्गों के बीच नेविगेट करना

अब तक, हम मार्ग बनाने में सक्षम हैं, लेकिन हम अपने आवेदन के भीतर कैसे नेविगेट करते हैं? हम उपयोग करते हैं <router-link> के बजाय टैग <a> रूटिंग को संभालने के लिए HTML में तत्व।

उदाहरण के लिए, यदि हम अपने एप्लिकेशन के शीर्ष पर एक नेविगेशन बार बनाना चाहते हैं, तो हम ऐसा कर सकते हैं App.js के ऊपर फ़ाइल <router-view/> टैग तो यह सभी मार्गों पर दिखाता है:

<nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
</nav>

राउटर-लिंक स्वीकार करता है to='path' विशेषता जो उपयोगकर्ता को घटक के पथ पर ले जाती है जैसा कि मार्ग को कॉन्फ़िगर करते समय सेट किया गया है। यह काम करता है href='path``' एचटीएमएल में विशेषता।

नामांकित मार्गों का उपयोग करना

नामित मार्गों का उपयोग करने से हम इसमें प्रवेश कर सकते हैं name कुंजी जिसकी पहुंच है name संपत्ति जिसे हम डेटा को इस तरह से बाध्य करके पथ का उपयोग करने के बजाय मार्गों को कॉन्फ़िगर करते समय सेट करते हैं:

<router-link :to="{ name: 'About' }">About</router-link>

इस पद्धति का उपयोग करने का एक लाभ यह है कि यदि हम अपने बड़े अनुप्रयोगों के लिए मार्ग पथ को बदलने का निर्णय लेते हैं, तो हमें सभी लिंक पथ को बदलना शुरू करने की आवश्यकता नहीं है जो बोझिल हो सकता है।

गतिशील रूटिंग

ऐसी स्थितियाँ उत्पन्न हो सकती हैं जो अनावश्यक पृष्ठ पुनरावृत्ति से बचने के लिए डायनेमिक रूटिंग के उपयोग की आवश्यकता होती हैं। उदाहरण के लिए, मान लें कि हमारे पास फलों की एक सूची है और हम चाहते हैं कि एक उपयोगकर्ता किसी विशिष्ट फल पर क्लिक करने में सक्षम हो और केवल उस फल के बारे में विवरण फल-विवरण पृष्ठ पर प्रदर्शित हो। इस मामले में, हम डायनेमिक रूटिंग का उपयोग करते हैं।

हमारे पास दो पृष्ठ होंगे - एक सूची में फलों को प्रदर्शित करने के लिए और दूसरा प्रत्येक फल का विवरण दिखाने के लिए, जो कि एक "खाका" पृष्ठ है जिसे फलों के विवरण से भरा जाना है। हम Vue फोल्डर में पेज बनाएंगे और फिर इसमें रूट्स जोड़ेंगे routes सरणी:

import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue'; const routes = [ { path: '/fruits', name: 'Fruits', component: FruitsPage, }, { path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, },
];

हम देखेंगे कि के लिए FruitDetails पृष्ठ, हमने एक गतिशील जोड़ा id संपत्ति तो यह हो जाता है id पैरामीटर और इसका उपयोग उस विशेष डेटा को क्वेरी करने के लिए करता है जो उस पृष्ठ पर दिखाता है $route.params हमारे टेम्पलेट में, इस प्रकार मार्ग को गतिशील बनाते हैं।

में FruitsPage, मान लीजिए कि हमारे पास फलों की एक सरणी है जिसे हम अपने आवेदन में लूप करते हैं, हम प्रत्येक फल को पैरा के साथ एक लिंक के साथ इस तरह लपेट सकते हैं:

<!-- FruitsPage.vue --> <template> <h1>Fruits page</h1> <div :key="fruit.id" v-for="fruit in fruits"> // dynamic linking by attaching the id as params <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }"> <h3>{{ fruit.name }}</h3> </router-link> </div>
</template> <script> export default { data() { return { fruits: [ { id: 1, name: 'Apple', description: "Apples are an incredibly nutritious fruit.", }, { id: 2, name: 'Mango', description: 'A mango is an edible stone fruit produced by the tropical.', }, { id: 3, name: 'Banana', description: 'A banana is an elongated, edible fruit of the genus Musa.', }, ], }; }, };
</script>

इस बिंदु पर जब कोई उपयोगकर्ता प्रत्येक फल पर क्लिक करता है, तो वह उन्हें इस पर ले जाएगा FruitDetails पृष्ठ जहाँ हम पहुँच सकते हैं id पैरामीटर और इसका उपयोग यह पहचानने के लिए करें कि किस फल का विवरण में दिखाया जाना चाहिए FruitDetails इस पृष्ठ पर ज़ूम कई वीडियो ट्यूटोरियल और अन्य साहायक साधन प्रदान करता है।

रूट पैरामीटर्स तक पहुंचें

अब तक हमने देखा है कि किसी विशेष पृष्ठ पर गतिशील रूप से पैरा को कैसे पास किया जाता है, आइए अब देखें कि हम उस परम को अपने में कैसे एक्सेस कर सकते हैं FruitDetails पृष्ठ। हम दो तरीकों से Vue में पैरामीटर एक्सेस कर सकते हैं - के माध्यम से $route.params या सहारा का उपयोग करना:

का प्रयोग $route.params

मापदंडों के माध्यम से सीधे पहुँचा जा सकता है $route.params:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

या हम इसे अपने के भीतर एक्सेस कर सकते हैं data() उपयोग करने की विधि this:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { data() { return { id: this.$route.params.id, }; }, };
</script>

Vue प्रॉप्स का उपयोग करना

मार्गों के माध्यम से डेटा को गतिशील रूप से एक्सेस करने का एक और आसान तरीका प्रॉप्स का उपयोग करना है। हमें पहले सेट करना होगा props सेवा मेरे true मार्ग विन्यास वस्तु में:

{ path: '/fruits/:id', name: 'FruitDetails', component: FruitDetails, props: true,
},

इस तरह, हमें बस इतना करना है कि जोड़ना है props विकल्प script टैग करें और फिर हमारे भीतर प्रॉप्स का उपयोग करें template टैग:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p>
</template> <script> export default { props: ['id'], };
</script>

404 त्रुटियाँ - कोई मार्ग नहीं मिला

इस घटना में कि कोई उपयोगकर्ता एक गैर-मौजूद मार्ग पर जाता है, Vue पृष्ठ को लोड करेगा, लेकिन बिना किसी घटक के, एक खाली पृष्ठ का निर्माण करेगा। इस मामले में, सबसे अच्छी बात यह है कि एक 404 पृष्ठ प्रदर्शित किया जाता है जिसमें शायद एक बटन उन्हें होमपेज पर ले जाता है या जहां भी हम मानते हैं कि वे जाना चाहते हैं।

यह हमारे 404 पृष्ठ के लिए एक घटक बनाकर और फिर हमारे राउटर कॉन्फ़िगरेशन फ़ाइल के मार्ग सरणी में एक 404 मार्ग जोड़कर आसानी से नियंत्रित किया जाता है, लेकिन इस बार हम उन सभी मार्गों को पकड़ने के लिए एक नियमित अभिव्यक्ति का उपयोग करेंगे जिन्हें पहले घोषित नहीं किया गया है:

{ path: '/:catchAll(.*)', name: 'ErrorPage', component: ErrorPage,
}

RSI :catchAll गतिशील खंड है जो की नियमित अभिव्यक्ति प्राप्त करता है (.*) जिसमें Vue राउटर यह जांचने के लिए उपयोग करता है कि उपयोगकर्ता जिस रूट पर नेविगेट करता है वह हमारे राउटर की कॉन्फ़िगरेशन फ़ाइल में परिभाषित है या नहीं। यदि ऐसे मार्ग मौजूद नहीं हैं, तो उपयोगकर्ता को घटक के लिए निर्देशित किया जाता है, जो हमारे मामले में है ErrorPage घटक:

<template> <h2>404 Page</h2> <p>This is a 404 page</p> <p>Visit home page <router-link to="/">here</router-link></p>
</template>

पुनर्निर्देश

ऐसी स्थिति में जहां हम चाहते हैं कि जब उपयोगकर्ता किसी विशिष्ट मार्ग पर जाएं तो उन्हें पुनर्निर्देशित किया जाए, उदाहरण के लिए, यदि हमारे पास एक पूर्व मार्ग था जिसका हम अब उपयोग नहीं करते हैं, तो हम चाहते हैं कि उपयोगकर्ता उस मार्ग पर जाने पर नए मार्ग पर पुनर्निर्देशित हो जाएं। यह हमारे रूट कॉन्फ़िगरेशन ऐरे में एक नया ऑब्जेक्ट जोड़कर आसानी से पूरा किया जाता है, a redirect खेत:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

उपरोक्त सभी कोड यह है कि यदि कोई उपयोगकर्ता विज़िट करता है, तो पथ /all-fruits, यह उन्हें पर पुनर्निर्देशित करेगा /fruits मार्ग.

प्रोग्रामेटिक नेविगेशन

अब तक, हमने रूटिंग के बारे में बहुत कुछ सीखा है, लेकिन एक और बात है जिसे आप जानना चाहेंगे: प्रोग्रामेटिक नेविगेशन कैसे करें। हम प्रोग्रामेटिक नेविगेशन को एक ऐसी स्थिति के रूप में परिभाषित करते हैं जिसमें एक उपयोगकर्ता को एक विशिष्ट क्रिया के आधार पर पुनर्निर्देशित/निर्देशित किया जाता है जो एक मार्ग पर होती है, जैसे कि लॉगिन या साइनअप कार्रवाई, या एक विशिष्ट बटन पर क्लिक करके, जैसे "वापस जाएं" बटन।

राउटर इतिहास

हम अपनी प्राथमिकताओं के आधार पर आसानी से पीछे या आगे नेविगेट करने के लिए ब्राउज़र इतिहास का उपयोग कर सकते हैं। यदि आपको याद हो तो हमारे पास एक createRouter() राउटर कॉन्फ़िगरेशन फ़ाइल में फ़ंक्शन जहां हम सेट करते हैं a history मूल्य, Vue राउटर को हमारे राउटर इतिहास का ट्रैक रखने की अनुमति देता है क्योंकि हम वेब एप्लिकेशन के माध्यम से रूट करते हैं।

यह हमें एक बटन क्लिक जैसे सशर्त के आधार पर ब्राउज़र के इतिहास को पार करने की अनुमति देता है:

<template> <h1>Fruit Details</h1> <p>This is fruit with the id of {{ id }}</p> <button @click="goBack">Go Back</button>
</template> <script> export default { props: ['id'], methods:{ goBack(){ this.$router.go(-1) } } };
</script>

हम का उपयोग करके आगे बढ़ने का निर्णय भी ले सकते हैं 1 के बजाय -1 और मान लीजिए कि हम 2 कदम आगे बढ़ना चाहते हैं जिसका हम उपयोग कर सकते हैं 2 or -2.

धक्का

push() आमतौर पर एक क्रिया होने के बाद उपयोग किया जाता है और इतिहास स्टैक में एक नई प्रविष्टि जोड़ता है। उदाहरण के लिए, यदि कोई उपयोगकर्ता सफलतापूर्वक साइन इन करता है, तो हम प्रोग्रामेटिक रूप से डैशबोर्ड पृष्ठ पर नेविगेट करना चाहेंगे। यह मार्ग के नाम के साथ पुश विधि को शामिल करके पूरा किया जाता है:

this.$router.push({ name: 'Dashboard' });

निष्कर्ष

रूटिंग Vue के मुख्य कार्यों में से एक है। जब तक आप निर्माण नहीं कर रहे हैं सिंगल-पेज एप्लिकेशन (एसपीए), आप एक से अधिक पृष्ठों को एक लैंडिंग पृष्ठ से कनेक्ट करना चाहेंगे ताकि उपयोगकर्ता उनके माध्यम से नेविगेट कर सकें।

इस गाइड में, हमने देखा है कि रूटिंग क्या है, आप इसे कैसे स्थापित कर सकते हैं vue-router नई और मौजूदा परियोजनाओं में, आलसी लोडिंग कैसे करें, मार्गों के बीच नेविगेट करें, गतिशील रूटिंग करें, रूट पैरामीटर एक्सेस करें और प्रोग्रामेटिक नेविगेशन निष्पादित करें।

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://stackabuse.com/guide-to-vue-router/