VueJS - रूटिंग

VueJS में बिल्ट-इन राउटर फेवरेट नहीं है। हमें इसे स्थापित करने के लिए कुछ अतिरिक्त चरणों का पालन करने की आवश्यकता है।

सीडीएन से डायरेक्ट डाउनलोड करें

Vue-router का नवीनतम संस्करण उपलब्ध है https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com npm- आधारित सीडीएन लिंक प्रदान करता है। उपरोक्त लिंक हाल के संस्करण में हमेशा अपडेट किया जाता है। हम इसे डाउनलोड और होस्ट कर सकते हैं, और इसका उपयोग स्क्रिप्ट टैग के साथ vue.js के साथ निम्नानुसार कर सकते हैं -

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

एनपीएम का उपयोग करना

वाउ-राउटर को स्थापित करने के लिए निम्न कमांड चलाएँ।

npm  install vue-router

GitHub का उपयोग करना

GitHub से रिपॉजिटरी को हम निम्न प्रकार से क्लोन कर सकते हैं -

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

आइए हम एक सरल उदाहरण के साथ vue-router.js का उपयोग करें।

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

रूटिंग से शुरू करने के लिए, हमें vue-router.js फ़ाइल को जोड़ना होगा। से कोड लेंhttps://unpkg.com/vue-router/dist/vue-router.js और इसे फ़ाइल vue-router.js में सहेजें।

स्क्रिप्ट को vue.js के बाद जोड़ा जाता है -

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

बॉडी सेक्शन में, निम्नानुसार एक राउटर लिंक परिभाषित है -

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>उपयोगकर्ता को प्रदर्शित करने के लिए HTML सामग्री पर नेविगेट करने के लिए उपयोग किया जाने वाला एक घटक है। संपत्ति के लिए गंतव्य है, यानी स्रोत फ़ाइल जहां प्रदर्शित की जाने वाली सामग्री को चुना जाएगा।

उपरोक्त कोड ऑफ कोड में, हमने दो राउटर लिंक बनाए हैं।

उस स्क्रिप्ट सेक्शन पर नज़र डालें जहाँ राउटर को इनिशियलाइज़ किया गया है। इस प्रकार निर्मित दो स्थिरांक हैं -

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

उनके पास टेम्प्लेट हैं, जिन्हें राउटर लिंक पर क्लिक करने पर दिखाना होगा।

अगला, रूट कांस्टेबल है, जो URL में प्रदर्शित होने वाले मार्ग को परिभाषित करता है।

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

मार्गों और घटक को परिभाषित करता है। रास्ता यानी/route1 उपयोगकर्ता द्वारा राउटर लिंक पर क्लिक करने पर URL में प्रदर्शित किया जाएगा।

घटक प्रदर्शित होने के लिए टेम्प्लेट के नाम लेता है। मार्गों से पथ को संपत्ति के लिए राउटर लिंक के साथ मेल खाना चाहिए।

उदाहरण के लिए, <राउटर-लिंक to = ”path here”> </ रूटर लिंक>

अगला, कोड के निम्नलिखित टुकड़े का उपयोग करके VueRouter के लिए उदाहरण बनाया गया है।

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouter कंस्ट्रक्टर मार्गों को परम के रूप में लेता है। राउटर ऑब्जेक्ट को कोड के निम्नलिखित टुकड़े का उपयोग करके मुख्य vue उदाहरण के लिए सौंपा गया है।

var vm = new Vue({
   el: '#app',
   router
});

उदाहरण निष्पादित करें और ब्राउज़र में प्रदर्शन देखें। राउटर लिंक का निरीक्षण और जांच करने पर, हम पाएंगे कि यह सक्रिय तत्व में क्लास जोड़ता है जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है।

जोड़ा गया वर्ग है class = “router-link-exact-active router-link-active”। उपरोक्त स्क्रीनशॉट में दिखाए गए अनुसार सक्रिय लिंक को कक्षा मिलती है। नोटिस करने के लिए एक और बात है, <राउटर-लिंक> एक टैग के रूप में प्रदान किया जाता है।

राउटर लिंक के लिए सहारा

आइए हम <रूटर-लिंक> पर जाने के लिए कुछ और गुण देखें।

सेवा

यह <राऊटर-लिंक> को दिया गया गंतव्य पथ है। जब क्लिक किया जाता है, तो आंतरिक रूप से रूटर (push) को मान दिया जाएगा। मान को एक स्ट्रिंग या एक स्थान ऑब्जेक्ट होने की आवश्यकता है। किसी वस्तु का उपयोग करते समय, हमें इसे बांधने की आवश्यकता होती है, जैसे कि उदाहरण 2 में दिखाया गया है।

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

निम्नलिखित उदाहरण 3 का आउटपुट है।

URL पथ में, नाम = Tery क्वेरी स्ट्रिंग का एक हिस्सा है। जैसे: http: //localhost/vueexamples/vue_router.html#/route? नाम = नाम?

बदलने के

राउटर लिंक की जगह एड को कॉल करेगा router.replace() के बजाय router.push()। प्रतिस्थापन के साथ, नेविगेशन इतिहास संग्रहीत नहीं है।

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

संलग्न

<राउटर-लिंक> <राउटर-लिंक> के लिए परिशिष्ट जोड़ना पथ को सापेक्ष बना देगा।

अगर हम राउटर लिंक से पाथ / रूट 1 से राउटर लिंक पाथ / रूट 2 पर जाना चाहते हैं, तो यह ब्राउजर में पथ को / path1 / path2 के रूप में दिखाएगा।

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

वर्तमान में <रूटर-लिंक> एक टैग के रूप में प्रस्तुत करता है। मामले में, हम इसे कुछ अन्य टैग के रूप में प्रस्तुत करना चाहते हैं, हमें टैग = "tagname" का उपयोग करके इसे निर्दिष्ट करने की आवश्यकता है;

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

हमने टैग को अवधि के रूप में निर्दिष्ट किया है और यही वह है जो ब्राउज़र में प्रदर्शित होता है।

अब प्रदर्शित टैग एक स्पैन टैग है। जैसे ही हम नेविगेशन के लिए राउटर लिंक पर क्लिक करेंगे, हम तब भी क्लिक होते देखेंगे।

सक्रिय श्रेणी

डिफ़ॉल्ट रूप से, राउटर लिंक सक्रिय होने पर सक्रिय वर्ग जोड़ा जाता है राउटर-लिंक-सक्रिय। हम निम्नलिखित कोड में दिखाए गए अनुसार सेट करके वर्ग को अधिलेखित कर सकते हैं।

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

उपयोग किया गया वर्ग सक्रिय_क्लास = "सक्रिय" है। यह ब्राउज़र में प्रदर्शित आउटपुट है।

सटीक सक्रिय श्रेणी

डिफ़ॉल्ट सटीक श्रेणी लागू किया गया रूटर-लिंक-सटीक-सक्रिय है। हम सटीक-सक्रिय-वर्ग का उपयोग करके इसे अधिलेखित कर सकते हैं।

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

यह वह है जो ब्राउज़र में प्रदर्शित होता है।

प्रतिस्पर्धा

वर्तमान में, राउटर-लिंक के लिए डिफ़ॉल्ट ईवेंट क्लिक इवेंट है। हम इवेंट प्रॉपर्टी का उपयोग करके इसे बदल सकते हैं।

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

अब, जब हम राउटर लिंक को माउसओवर करते हैं, तो यह निम्न ब्राउज़र में दिखाए अनुसार नेविगेट करेगा। राउटर लिंक 1 पर माउसओवर और हम नेविगेशन को बदलते हुए देखेंगे।