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: ایک متحرک route آپ کو route متحرک پیرامیٹرز کے ساتھ s کی وضاحت کرنے کی اجازت دیتا ہے۔ مثال کے طور پر، آپ route متعلقہ id کے ساتھ صارف کی معلومات کو ظاہر کرنے کے لیے "/user/:id" کے راستے کی وضاحت کر سکتے ہیں۔

  5. نیسٹڈ Route: نیسٹڈ route ایک ایسا تصور ہے جو آپ کو route والدین کے اندر بچے کا گھونسلہ بنانے کی اجازت دیتا ہے route ۔ یہ آپ کو پیچیدہ ڈھانچے بنانے route اور اجزاء کو گھریلو انداز میں ترتیب دینے کے قابل بناتا ہے۔

  6. ری ڈائریکٹ Route: ایک ری ڈائریکٹ route آپ کو صارفین کو ایک راستے سے دوسرے راستے پر بھیجنے کی اجازت دیتا ہے۔ یہ اس وقت کارآمد ہوتا ہے جب آپ route صارفین کو پرانے راستے سے نئے راستے پر جانا چاہتے ہیں۔

  7. Route گارڈ: route گارڈ ایک ایسا فنکشن ہے جو آپ کو route s تک رسائی کی جانچ اور کنٹرول کرنے کی اجازت دیتا ہے۔ محافظوں کا استعمال کرتے ہوئے route ، آپ صارفین کو مخصوص s تک رسائی سے روکنے route یا ری ڈائریکشن سے پہلے خصوصی ہینڈلنگ انجام دینے کے لیے شرائط کی وضاحت کر سکتے ہیں۔

 

استعمال کرنے کے لیے ، آپ ان مراحل پر عمل کر سکتے ہیں: Vue Router

مرحلہ 1: این پی ایم یا سوت کا استعمال کرتے ہوئے انسٹال کریں: Vue Router 

npm install vue-router

یا 

yarn add vue-router

مرحلہ 2: پروجیکٹ کی روٹ ڈائرکٹری میں ایک فائل بنائیں ۔ اس فائل میں، ہم ایپلیکیشن کے s کا اعلان اور تشکیل کریں گے۔ 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 ، آپ اجزاء کا استعمال کر سکتے ہیں جیسے کہ دوسرے s کے لنکس بنانا، اور موجودہ مواد کو ظاہر کرنا ۔ <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