Vue Academy · पाठ

Vue Router सेट अप करना

Vue Router इंस्टॉल कीजिए और अपने पहले रूट परिभाषित कीजिए

पाठ 1, कुल 3 में से13 चरण

Vue Router सेट अप करना, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

Vue Router क्या है

Vue Router, Vue के लिए आधिकारिक रूटिंग लाइब्रेरी है।

यूआरएल को घटकों से जोड़ता है
पूरे पेज को दोबारा लोड किए बिना सिंगल-पेज नेविगेशन सक्षम करता है
इतिहास, लिंक और पैरामीटर प्रबंधित करता है

Vue Router इंस्टॉल करना

एनपीएम की मदद से अपने प्रोजेक्ट में Vue Router जोड़ें।

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

रूट घटक बनाना

हर रूट एक घटक रेंडर करता है। शुरुआत सरल पेज घटकों से करें।

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

रूट्स ऐरे परिभाषित करना

एक routes ऐरे पाथ को घटकों से जोड़ता है।

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

createRouter फ़ंक्शन रूट्स और इतिहास मोड से एक राउटर बनाता है।

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory /about जैसे साफ़ यूआरएल के लिए एचटीएमएल5 हिस्ट्री एपीआई का उपयोग करता है।

यूआरएल में हैश नहीं होता
डीप लिंक के काम करने के लिए सर्वर कॉन्फ़िगरेशन आवश्यक है
विकल्प createWebHashHistory (/#/about) है

राउटर रजिस्टर करना

app.use की मदद से राउटर को app में इंस्टॉल करें।

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

राउटर-व्यू

राउटर-व्यू घटक वह स्थान है जहाँ मिलान किया गया रूट घटक रेंडर होता है।

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

राउटर-लिंक

नेविगेशन के लिए साधारण एंकर टैग के बजाय राउटर-लिंक का उपयोग करें। इससे पूरा पेज दोबारा लोड नहीं होता।

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

सक्रिय लिंक की शैली

राउटर-लिंक सक्रिय लिंक में अपने-आप CSS क्लास जोड़ता है।

आंशिक मिलान के लिए राउटर-लिंक-ऐक्टिव
सटीक मिलान के लिए राउटर-लिंक-एक्ज़ैक्ट-ऐक्टिव

वर्तमान पेज को उभारने के लिए इन क्लास की शैली तय करें।

सब कुछ एक साथ जोड़ना

पूरा प्रवाह:

पाथ को घटकों से जोड़ने वाले रूट्स परिभाषित करें
createRouter और createWebHistory की मदद से राउटर बनाएँ
इसे app.use(router) के साथ रजिस्टर करें
राउटर-व्यू रखें और राउटर-लिंक से नेविगेट करें

त्वरित जाँच

Vue Router सेटअप के बारे में अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: Vue Router सेट अप करना

आपने क्लाइंट-साइड रूटिंग सेट अप करना सीखा:

npm install vue-router से इंस्टॉल करें
एक routes ऐरे परिभाषित करें
createWebHistory के साथ createRouter बनाएँ
app.use(router) के ज़रिए रजिस्टर करें
router-view और router-link का उपयोग करें

अगला विषय: नेस्टेड और डायनैमिक रूट्स।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Vue Router सेट अप करना” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Vue Router सेट अप करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।

“Vue Router सेट अप करना” में मैं क्या सीखूँगा?

Vue Router इंस्टॉल कीजिए और अपने पहले रूट परिभाषित कीजिए आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।

“Vue Router सेट अप करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ