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" পাথ দিয়ে একটি সংজ্ঞায়িত করতে পারেন।

5. নেস্টেড Route: নেস্টেড route হল এমন একটি ধারণা যা আপনাকে route পিতামাতার মধ্যে সন্তানকে নেস্ট করতে দেয় route । এটি আপনাকে জটিল কাঠামো তৈরি করতে route এবং নেস্টেড পদ্ধতিতে উপাদানগুলিকে সংগঠিত করতে সক্ষম করে।

6. পুনঃনির্দেশ Route: একটি পুনঃনির্দেশ route আপনাকে ব্যবহারকারীদের এক পথ থেকে অন্য পথে পুনঃনির্দেশ করতে দেয়। route আপনি যখন ব্যবহারকারীদের পুরানো পথ থেকে একটি নতুন পথে যেতে চান তখন এটি কার্যকর ।

7. Route গার্ড: একটি route গার্ড হল একটি ফাংশন যা আপনাকে route s-এ অ্যাক্সেস চেক এবং নিয়ন্ত্রণ করতে দেয়। গার্ড ব্যবহার করে route, আপনি নির্দিষ্ট route গুলি অ্যাক্সেস করা থেকে ব্যবহারকারীদের প্রতিরোধ করার জন্য শর্তগুলি সংজ্ঞায়িত করতে পারেন বা পুনঃনির্দেশের আগে বিশেষ হ্যান্ডলিং সম্পাদন করতে পারেন।

 

ব্যবহার করতে, আপনি এই পদক্ষেপগুলি অনুসরণ করতে পারেন: Vue Router

ধাপ 1: npm বা সুতা ব্যবহার করে ইনস্টল করুন: 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 হোম পেজের জন্য একটি এবং একটি 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