Vue রাউটার গাইড

ভূমিকা

Vue.js দিয়ে ওয়েব অ্যাপ্লিকেশন ডেভেলপ করার সময়, যদি না আপনি একটি নির্মাণ করছেন একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA), আপনি ব্যবহারকারীদের তাদের মাধ্যমে নেভিগেট করার অনুমতি দেওয়ার জন্য একটি ল্যান্ডিং পৃষ্ঠার সাথে একাধিক পৃষ্ঠা সংযুক্ত করতে চাইবেন৷ এই হিসাবে পরিচিত হয় প্রমাথী.

রাউটিং হল সেই প্রক্রিয়া যার মাধ্যমে একজন ব্যবহারকারীকে একটি ওয়েবসাইটের বিভিন্ন পৃষ্ঠায় নেভিগেট করা হয়। Vue.js হল একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যা একক পৃষ্ঠা অ্যাপস তৈরি করতে ব্যবহৃত হয়, যার মানে হল এই অ্যাপ্লিকেশনটি সার্ভার থেকে ব্রাউজারে একবার লোড করা হয় এবং রাউটিং করার সময় ব্রাউজারটিকে পুনরায় লোড করার প্রয়োজন হয় না; পরিবর্তে, এটি কেবল এই পৃষ্ঠাগুলিকে অনুরোধ করে এবং সেগুলি লোড হয়৷

এই নির্দেশিকাটিতে, আমরা শিখব কিভাবে Vue.js এর মাধ্যমে রাউটিং করতে হয় এবং বিভিন্ন ধরনের রাউটিং করা যায় এবং কিভাবে করা যায় সে সম্পর্কে গভীরভাবে ডুব দিতে হবে।

শুরু হচ্ছে

Vue.js-এ রাউটিং করা হয় ভিউ রাউটার, যা আমাদের একটি রাউটিং সিস্টেম সেট আপ করার জন্য মূল Vue লাইব্রেরির সাথে একযোগে কাজ করে। আমরা ব্যবহার করতে চাই vue-router আমাদের প্রকল্পের দুটি পরিস্থিতিতে। আমরা হয় একটি বিদ্যমান প্রকল্পে রাউটার ব্যবহার করতে চাই বা একটি নতুন প্রকল্প তৈরি করার সময় এটি যোগ করতে চাই।

বিদ্যমান প্রকল্পে Vue রাউটার সেটআপ করুন

একীভূত vue-router একটি বিদ্যমান প্রকল্পের মধ্যে প্রযুক্তিগত হতে পারে, এবং আমরা এখন এই বিবরণ উপর যেতে হবে. প্রথম পদক্ষেপটি নিম্নলিখিত কমান্ডটি ব্যবহার করে vue রাউটার প্যাকেজ ইনস্টল করা হবে:

! 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, যা সাইটের রুটের সাপেক্ষে url পাথ name, যা একটি শনাক্তকারী হিসাবে কাজ করে, এবং component, যা আমরা পৃষ্ঠার শীর্ষে আমদানি করেছি।

রুট অ্যারে ছাড়াও, আমরা একটি তৈরি করে নীচের অংশে রাউটার ইন্সট্যান্স সেট আপ করি 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 রাউটার ইনস্টল করুন

যদি আমরা একটি নতুন প্রকল্প তৈরি করতে যাচ্ছি এবং বিশ্বাস করি যে আমরা ব্যবহার করব 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>

এই পদ্ধতিটি ব্যবহার করার একটি সুবিধা হল যদি আমরা আমাদের বড় অ্যাপ্লিকেশনগুলির জন্য রুট পাথ পরিবর্তন করার সিদ্ধান্ত নিই, আমাদের সমস্ত লিঙ্ক পাথ পরিবর্তন করা শুরু করতে হবে না যা কষ্টকর হতে পারে।

ডাইনামিক রাউটিং

অপ্রয়োজনীয় পৃষ্ঠার পুনরাবৃত্তি এড়াতে গতিশীল রাউটিং ব্যবহার করার প্রয়োজনীয়তার উদ্ভব হতে পারে। উদাহরণ স্বরূপ, ধরুন আমাদের কাছে ফলের একটি তালিকা আছে এবং আমরা চাই যে কোন ব্যবহারকারী একটি নির্দিষ্ট ফলের উপর ক্লিক করতে সক্ষম হবেন এবং শুধুমাত্র সেই ফল সম্পর্কে বিস্তারিত ফল-বিশদ পৃষ্ঠায় প্রদর্শিত হবে। এই ক্ষেত্রে, আমরা গতিশীল রাউটিং ব্যবহার করি।

আমাদের দুটি পৃষ্ঠা থাকবে - একটি তালিকায় ফল দেখানোর জন্য এবং একটি প্রতিটি ফলের বিশদ বিবরণ দেখানোর জন্য, যা একটি "ব্লুপ্রিন্ট" পৃষ্ঠা যা ফলের বিবরণ দিয়ে তৈরি করা হবে। আমরা 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 রাউটার ব্যবহারকারী যে রুটে নেভিগেট করে তা আমাদের রাউটারের কনফিগারেশন ফাইলে সংজ্ঞায়িত করা হয়েছে কিনা তা পরীক্ষা করার জন্য ব্যবহার করে। যদি এই ধরনের রুটগুলি বিদ্যমান না থাকে, ব্যবহারকারীকে কম্পোনেন্টে নির্দেশিত করা হয়, যা আমাদের ক্ষেত্রে 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>

পুনর্চালনা

এমন একটি পরিস্থিতিতে যেখানে আমরা চাই যে ব্যবহারকারীরা যখন একটি নির্দিষ্ট রুটে যান তখন তাদের রিডাইরেক্ট করা হোক, উদাহরণস্বরূপ, যদি আমাদের একটি পূর্বের রুট থাকে যা আমরা আর ব্যবহার করি না, আমরা চাই যে ব্যবহারকারীরা যখন সেই রুটে যান তখন তাদের নতুন একটিতে রিডাইরেক্ট করা হোক। আমাদের রুট কনফিগারেশন অ্যারেতে একটি নতুন অবজেক্ট যোগ করে এটি সহজে সম্পন্ন করা হয়, a সহ redirect ক্ষেত্র:

{ path: '/fruits', name: 'Fruits', component: FruitsPage,
},
{ path: '/all-frults', redirect: '/fruits',
},

উপরের সমস্ত কোড হল যে যদি একজন ব্যবহারকারী ভিজিট করে, পাথ /all-fruits, এটা তাদের পুনঃনির্দেশিত হবে /fruits রুট।

প্রোগ্রাম্যাটিক নেভিগেশন

এখনও অবধি, আমরা রাউটিং সম্পর্কে অনেক কিছু শিখেছি, তবে আরও একটি জিনিস আপনি জানতে চাইবেন: কীভাবে প্রোগ্রামেটিক নেভিগেশন করতে হয়। আমরা প্রোগ্রাম্যাটিক নেভিগেশনকে এমন একটি পরিস্থিতি হিসাবে সংজ্ঞায়িত করি যেখানে কোনও ব্যবহারকারীকে একটি নির্দিষ্ট ক্রিয়াকলাপের উপর ভিত্তি করে পুনঃনির্দেশিত/নির্দেশিত করা হয় যা একটি রুটে ঘটে, যেমন একটি লগইন বা সাইনআপ ক্রিয়া, বা একটি নির্দিষ্ট বোতামে ক্লিক করে, যেমন একটি "ব্যাক যান" বোতাম৷

রাউটার ইতিহাস

আমরা আমাদের পছন্দের উপর নির্ভর করে সহজেই পিছনের দিকে বা সামনে নেভিগেট করতে ব্রাউজার ইতিহাস ব্যবহার করতে পারি। যদি আপনি মনে করেন, আমরা একটি আছে createRouter() রাউটার কনফিগারেশন ফাইলের ফাংশন যেখানে আমরা একটি সেট করি 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 নতুন এবং বিদ্যমান প্রকল্পগুলিতে, কীভাবে অলস লোডিং সঞ্চালন করা যায়, রুটের মধ্যে নেভিগেট করা যায়, গতিশীল রাউটিং সঞ্চালন করা যায়, রুট প্যারামিটার অ্যাক্সেস করা যায় এবং প্রোগ্রামেটিক নেভিগেশন করা যায়।

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://stackabuse.com/guide-to-vue-router/