ویو راؤٹر کے لئے رہنما

تعارف

Vue.js کے ساتھ ویب ایپلیکیشنز تیار کرتے وقت، جب تک کہ آپ ایک بنا رہے ہوں۔ سنگل پیج ایپلیکیشن (SPA)، آپ ایک سے زیادہ صفحات کو ایک لینڈنگ صفحہ سے جوڑنا چاہیں گے تاکہ صارفین ان کے ذریعے تشریف لے سکیں۔ یہ کے طور پر جانا جاتا ہے روٹنگ.

روٹنگ وہ عمل ہے جس کے ذریعے صارف کو ویب سائٹ کے مختلف صفحات پر نیویگیٹ کیا جاتا ہے۔ Vue.js ایک جاوا اسکرپٹ فریم ورک ہے جو سنگل پیج ایپس بنانے کے لیے استعمال ہوتا ہے، جس کا مطلب ہے کہ یہ ایپلیکیشن سرور سے براؤزر پر صرف ایک بار لوڈ ہوتی ہے، اور براؤزر کو روٹ کرتے وقت دوبارہ لوڈ کرنے کی ضرورت نہیں ہوتی ہے۔ اس کے بجائے، یہ صرف ان صفحات کی درخواست کرتا ہے اور وہ لوڈ ہوتے ہیں۔

اس گائیڈ میں، ہم Vue.js کے ساتھ روٹنگ کرنے کا طریقہ سیکھیں گے اور روٹنگ کی مختلف اقسام میں گہرا غوطہ لگائیں گے جو کیا جا سکتا ہے اور کیسے کیا جا سکتا ہے۔

شروع

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جو کہ سائٹ کے روٹ کے نسبت یو آر ایل کا راستہ ہے، 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 Router انسٹال کریں۔

اگر ہم ایک نیا پروجیکٹ بنانے والے ہیں اور یقین رکھتے ہیں کہ ہم اس کا استعمال کریں گے۔ 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``' HTML میں وصف۔

نامزد راستوں کا استعمال

نامزد راستوں کا استعمال ہمیں اندر جانے کی اجازت دیتا ہے۔ name کلید جس تک رسائی حاصل ہے۔ name وہ پراپرٹی جو ہم روٹس کو کنفیگر کرتے وقت سیٹ کرتے ہیں بجائے اس کے کہ ڈیٹا کو بائنڈنگ کرکے پاتھ استعمال کریں:

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

One advantage of using this method is in case we decide to change the route path for our large applications, we don’t need to start changing all links path which could be cumbersome.

متحرک روٹنگ

ایسے حالات پیدا ہو سکتے ہیں جو صفحہ کی غیر ضروری تکرار سے بچنے کے لیے متحرک روٹنگ کے استعمال کی ضرورت محسوس کریں۔ مثال کے طور پر، فرض کریں کہ ہمارے پاس پھلوں کی ایک فہرست ہے اور ہم چاہتے ہیں کہ صارف کسی مخصوص پھل پر کلک کر سکے اور پھلوں کی تفصیلات والے صفحہ پر صرف اس پھل کی تفصیلات دکھائی جائیں۔ اس صورت میں، ہم متحرک روٹنگ کا استعمال کرتے ہیں۔

ہمارے پاس دو صفحات ہوں گے - ایک فہرست میں پھلوں کو دکھانے کے لیے اور ایک ہر پھل کی تفصیلات دکھانے کے لیے، جو کہ ایک "بلیو پرنٹ" صفحہ ہے جس میں پھلوں کی تفصیلات شامل کی جائیں گی۔ ہم 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 کا استعمال

راستوں کے ذریعے متحرک طور پر ڈیٹا تک رسائی کا ایک اور آسان طریقہ پرپس کا استعمال ہے۔ ہمیں پہلے سیٹ کرنا ہے۔ 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,
}

۔ :catchAll متحرک طبقہ ہے جس کا باقاعدہ اظہار ملتا ہے۔ (.*) جس میں Vue Router یہ چیک کرنے کے لیے استعمال کرتا ہے کہ آیا صارف جس راستے پر نیویگیٹ کرتا ہے وہ ہمارے روٹر کی کنفیگریشن فائل میں بیان کیا گیا ہے۔ اگر اس طرح کے راستے موجود نہیں ہیں تو، صارف کو جزو کی طرف ہدایت کی جاتی ہے، جو ہمارے معاملے میں ہے۔ 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>

ری ڈائریکڈز

ایسی صورت حال میں جہاں ہم چاہتے ہیں کہ جب صارفین کسی مخصوص راستے پر جائیں تو انہیں ری ڈائریکٹ کیا جائے، مثال کے طور پر، اگر ہمارے پاس کوئی سابقہ ​​راستہ تھا جسے ہم اب استعمال نہیں کرتے ہیں، تو ہم چاہتے ہیں کہ جب صارفین اس راستے پر جائیں تو انہیں نئے راستے پر بھیج دیا جائے۔ یہ آسانی سے ہمارے روٹس کنفیگریشن اری میں ایک نیا آبجیکٹ شامل کرکے مکمل کیا جاتا ہے۔ 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 کی بنیادی خصوصیات میں سے ایک ہے۔ جب تک کہ آپ ایک تعمیر نہیں کر رہے ہیں۔ سنگل پیج ایپلیکیشن (SPA)، آپ ایک سے زیادہ صفحات کو ایک لینڈنگ صفحہ سے جوڑنا چاہیں گے تاکہ صارفین ان کے ذریعے تشریف لے سکیں۔

اس گائیڈ میں، ہم نے ایک نظر ڈالی ہے کہ روٹنگ کیا ہے، آپ اسے کیسے انسٹال کر سکتے ہیں۔ vue-router نئے اور موجودہ پروجیکٹس میں، سست لوڈنگ کیسے کریں، راستوں کے درمیان نیویگیٹ کیسے کریں، ڈائنامک روٹنگ، ایکسیس روٹ پیرامیٹرز اور پرفارم پروگرامیٹک نیویگیشن کیسے کریں۔

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://stackabuse.com/guide-to-vue-router/