কীভাবে Vue.js, Vuex, Vuetify এবং Firebase দিয়ে SPA তৈরি করবেন: Vue রাউটার সহ

পার্ট 2: আপনার এসপিএ সহ ভ্যু রাউটারগুলি কীভাবে ব্যবহার করবেন তা শিখুন

খাদ্য প্রস্তুতি অ্যাপ্লিকেশন

খাদ্য সরবরাহের ওয়েবসাইট তৈরি করতে কীভাবে ভ্যু.জেএস, ভেক্স, ভিউ রাউটার এবং ফায়ারবেস ব্যবহার করবেন তা শিখুন।

এটি ভ্যু অ্যাপ্লিকেশন তৈরির বিষয়ে আমার চার অংশের সিরিজের দ্বিতীয় অংশ। এখানে সমস্ত অংশের একটি তালিকা রয়েছে:

পর্ব 1: ভ্যুটিফাই এবং ভিউ রাউটার ব্যবহার করে ভ্যু ইনস্টল করুন এবং একটি এসপিএ তৈরি করুন

পার্ট 2: ভ্যু রাউটার ব্যবহার করে

পার্ট 3: ভেক্স ব্যবহার করে এবং এপিআইতে অ্যাক্সেস করা

পার্ট 4: প্রমাণীকরণের জন্য ফায়ারবেস ব্যবহার করা

পুনরুদ্ধার

এই সিরিজের প্রথম অংশে, আমরা ভ্যু সিএলআই ব্যবহার করে আমাদের ভ্যু অ্যাপ্লিকেশন তৈরি করেছি। আমরা অ্যাপটিতে ভুটিফাই যুক্ত করেছি। আমি অ্যাপটি স্টাইল করতে ভুটিফাই ব্যবহার করি। আমি এটি সরবরাহ করে এমন অনেকগুলি ইউআই উপাদানগুলিরও সুবিধা নেব।

সবকিছু ইনস্টল করার পরে, আমরা আমাদের অ্যাপ্লিকেশনটির প্রারম্ভিক পৃষ্ঠাটি ডিজাইন করেছি।

ভিউ রাউটার ব্যবহার করা হচ্ছে

ভিউ রাউটার আমাদের অ্যাপ্লিকেশনটির জন্য নেভিগেশন সরবরাহ করে। আপনি যখন সাইন ইন বোতামটি ক্লিক করেন, আপনাকে সেই পৃষ্ঠাতে নিয়ে যাওয়া হবে যেখানে আপনি সাইন ইন করতে পারেন। মেনু বোতামটি ক্লিক করা আপনাকে উপলভ্য খাবারের পরিকল্পনাগুলি দেখানো পৃষ্ঠায় নিয়ে যাবে।

রাউটার.জেএস ফাইলটিতে রাউটিংয়ের জন্য কনফিগারেশন রয়েছে। এই ফাইলটি খুলুন। এই ফাইলটিতে আপনি দুটি রুট দেখতে পাবেন। আপনি যখন "/" ক্লিক করেন তখন Home.vue উপাদানটি দেখায় One যখন আপনি "প্রায়" রুটটি ক্লিক করেন তখন অন্যটি About.vue উপাদানটি দেখায়।

আমাদের আবেদনের প্রতিটি পৃষ্ঠার জন্য আমাদের রুট তৈরি করতে হবে। আমাদের প্রয়োগের জন্য নিম্নলিখিত রুটগুলির প্রয়োজন:

  • /
  • /তালিকা
  • /প্রবেশ করুন
  • /যোগদান করতে

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

আমাদের রুট অ্যারেতে তিনটি নতুন রুট যুক্ত করতে হবে। এই নতুন রুটগুলি যুক্ত করার পরে, আমাদের রাউটার.জেএস ফাইলটি দেখতে এইরকম হবে:

'ভ্যু' থেকে আমদানি করুন; 'ভিউ-রাউটার' থেকে রাউটার আমদানি করুন; './Views/Home.vue' থেকে হোম আমদানি করুন;
ভ্যু ইউজ (রাউটার);
স্ট্যান্ডার্ড এক্সপোর্ট নতুন রাউটার ({মোড: "ইতিহাস", বেস: প্রসেস.এনভি.বিএএস, URL, রুটগুলি: [{পথ: '/', নাম: "হোম", উপাদান: হোম}, {পথ: '/ সম্পর্কে', নাম : "সম্পর্কে", উপাদান: () => আমদানি ('./ দর্শন / About.vue')}, {পথ: '/ মেনু', নাম: "মেনু", উপাদান: () => আমদানি ('./ ভিউজ / মেনু.ভ্যু ')}, {পথ:' / লগইন ', নাম: "লগইন", উপাদান: () => আমদানি (' ./ ভিউ / সাইন ইন.ভুই ')}, {পথ:' / join ' , নাম: 'যোগদান', উপাদান: () => আমদানি ('./ ভিউ / জয়েন.ভয়ে')}]});

বনাম উপাদানগুলি দেখুন

আমাদের প্রথম পাঠে, আমরা বেশ কয়েকটি নতুন ভ্যু উপাদান তৈরি করেছি। আমি উপাদান ফোল্ডারে এই উপাদানগুলি রেখেছি। এই তিনটি নতুন উপাদানগুলির জন্য, তারা উপাদান ফোল্ডারে তৈরি করা হয়নি। পরিবর্তে, সেগুলি ভিউ ফোল্ডারে স্থাপন করা হয়েছে। কারণটি হ'ল ইউআরএল / মেনুর মতো যা কিছু হিট হয়েছে তা ভিউ ফোল্ডারে অন্তর্ভুক্ত। বাকি সবগুলি উপাদান ফোল্ডারে থাকা উচিত।

নতুন দর্শন তৈরি করুন

আমাদের তিনটি নতুন রুটের প্রত্যেকটির জন্য নতুন দৃষ্টিভঙ্গি তৈরি করতে হবে। ভিউ ফোল্ডারে, নিম্নলিখিত তিনটি ফাইল তৈরি করুন:

  • মেনু.ভ্যু
  • Signin.vue
  • জয়েন.ভ্যু

প্রতিটি ফাইলের মধ্যে একটি যুক্ত করুন সঙ্গে একটি যুক্ত। লেআউটে একটি আছে পৃষ্ঠার নাম সহ ট্যাগ করুন।

এখানে মেনু.ভ্যু ফাইলটি রয়েছে: