close

Routing आणि .js Navigation मध्ये Vue- एक व्यापक मार्गदर्शक

Routing आणि वेब ऍप्लिकेशनमध्ये पृष्ठे तयार करण्यासाठी आणि त्यांच्या दरम्यान नेव्हिगेट करण्यासाठी .js Navigation मध्ये आवश्यक संकल्पना आहेत. .js मध्ये प्रणाली व्यवस्थापित करण्यासाठी एक शक्तिशाली आणि लवचिक लायब्ररी आहे. Vue Vue Router routing Vue

 

route येथे .js मधील s शी संबंधित मूलभूत संकल्पना आहेत Vue:

  1. Route: A route मार्ग परिभाषित करतो आणि त्यास संबंधित घटकाशी जोडतो. प्रत्येकाचा route एक मार्ग आणि एक घटक असतो.

  2. Vue Router: .js मध्ये s व्यवस्थापित करण्यासाठी एक लायब्ररी आहे. हे अॅप्लिकेशनमध्ये s परिभाषित आणि व्यवस्थापित करण्यासाठी साधने प्रदान करते. Vue Router route Vue route Vue

  3. Route घटक: प्रत्येकामध्ये route एक संबंधित घटक असतो. अ सक्रिय झाल्यावर route, संबंधित घटक प्रदर्शित केला जाईल.

  4. डायनॅमिक Route: डायनॅमिक तुम्हाला डायनॅमिक पॅरामीटर्ससह s route परिभाषित करण्यास अनुमती देतो. route उदाहरणार्थ, route संबंधित आयडीसह वापरकर्ता माहिती प्रदर्शित करण्यासाठी तुम्ही "/user/:id" या मार्गासह a परिभाषित करू शकता.

  5. नेस्टेड Route: नेस्टेड ही एक संकल्पना आहे जी तुम्हाला मुलाचे घरटे पालकांमध्ये route ठेवण्याची परवानगी देते. हे तुम्हाला जटिल संरचना तयार करण्यास आणि नेस्टेड पद्धतीने घटक आयोजित करण्यास सक्षम करते. route route route

  6. पुनर्निर्देशन Route: पुनर्निर्देशन route तुम्हाला वापरकर्त्यांना एका मार्गावरून दुसऱ्या मार्गावर पुनर्निर्देशित करण्यास अनुमती देते. route जेव्हा तुम्हाला वापरकर्त्यांना जुन्या मार्गावरून नवीन मार्गावर जायचे असेल तेव्हा हे उपयुक्त आहे .

  7. Route गार्ड: route रक्षक हे एक कार्य आहे जे तुम्हाला s मध्ये प्रवेश तपासण्याची आणि नियंत्रित करण्याची परवानगी देते route. गार्ड्स वापरून route, तुम्ही वापरकर्त्यांना विशिष्ट s मध्ये प्रवेश करण्यापासून रोखण्यासाठी route किंवा पुनर्निर्देशनापूर्वी विशेष हाताळणी करण्यासाठी अटी परिभाषित करू शकता.

 

वापरण्यासाठी, आपण या चरणांचे अनुसरण करू शकता: Vue Router

पायरी 1: एनपीएम किंवा सूत वापरून स्थापित करा: Vue Router 

npm install vue-router

किंवा 

yarn add vue-router

पायरी 2: प्रकल्पाच्या रूट निर्देशिकेत फाइल तयार करा. या फाईलमध्ये, आम्ही ऍप्लिकेशनचे एस घोषित आणि कॉन्फिगर करू. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

पायरी 3: फाइलमध्ये main.js, आयात करा आणि अनुप्रयोगाशी लिंक करा: Vue Router Vue 

import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({
  router,  
  render: h => h(App),  
}).$mount('#app');

पायरी 4: फाइलमध्ये, तुम्ही, , आणि इतर गुणधर्मांसारखे घटक वापरून s घोषित करू शकता. router.js route Vue Router path component

उदाहरणार्थ, तुम्ही route मुख्यपृष्ठासाठी a आणि route बद्दलच्या पृष्ठासाठी खालीलप्रमाणे घोषित करू शकता:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

पायरी 5: घटकांमध्ये, तुम्ही इतर घटकांसाठी दुवे तयार करण्यासाठी आणि वर्तमान सामग्री प्रदर्शित करण्यासाठी Vue घटक वापरू शकता. <router-link> route <router-view> route

उदाहरणार्थ, होम घटकाच्या टेम्प्लेटमध्ये, तुम्ही बद्दलच्या पृष्ठाची लिंक तयार करण्यासाठी वापरू शकता: <router-link> 

<router-link to="/about">Go to About</router-link>

अॅप घटकाच्या टेम्पलेटमध्ये, तुम्ही वर्तमान सामग्री प्रदर्शित करण्यासाठी वापरू शकता: <router-view> route 

<router-view></router-view>

या चरणांसह, तुम्ही व्यवस्थापित करण्यासाठी आणि तुमच्या .js ऍप्लिकेशनमध्ये सेट केले आहे आणि वापरले आहे. Vue Router routing navigation Vue