https://virgool.io/feed/@r.pordel1380 ریحانه پردل هستم . فارغ التحصیل مهندسی کامپیوتر، عاشق الگوریتم نویسی و حل مشکلات و در حال حاضر به عنوان توسعه دهنده ی وب( vue js و nest js ) مشغول کار هستم و اماده ی رویارویی با هر چالشی :) fa 2026-06-16 07:48:43 https://files.virgool.io/upload/users/3407171/avatar/avatar.png?height=120&width=120 https://virgool.io/@r.pordel1380 https://virgool.io/@r.pordel1380/%D9%85%D8%B3%DB%8C%D8%B1-%DB%8C%D8%A7%D8%A8%DB%8C-routing-%D8%AF%D8%B1-vue-js-%D9%82%D8%B3%D9%85%D8%AA-2-riq8j4hw5uui سلام به همگی .امیدوارم که روزگار بر وفق مرادتون باشه . در این پست میخوام کمی بیشتر در مورد مسیریابی (routing) در vue صحبت کنم. اگر با این مفهوم اشنا نیستید یه نگاهی به پست قبل بندازید 😉در پروژه های کمی بزرگ و واقعی ، مسیر یابی های ما به سادگی پست قبل نیست. مثلا فرض کنید که قصد داریم کاربر رو به صفحه ی پروفایل هدایت کنیم و البته یوزر ایدی فرد رو هم در url ارسال کنیم تا بعدا در صفحه ی پروفایل دریافتش کنیم و عملیات مورد نظرمون رو باهاش انجام بدیم. حالا چیکار کنیم؟خب خیلی ساده میتونید به شکل زیر route رو برای صفحه ی مد نظرتون تعریف کنید تا اجازه ی ارسال پارامتر در url بهتون داده بشه :اگر هم برای همه ی کاربرا قصد ندارید id رو استفاده کنید ، یا به عبارتی بخواید یک پارامتر اختیاری رو در url استفاده کنید میتونید از علامت سوال به صورت زیر کمک بگیرید:حالا در کامپوننت مبدا میتونید با this.$router.push(`/users/${id}`) علاوه بر تغییر url ،پارامتر مد نظرتون رو هم ارسال کنید و در کامپونت مقصد میتونید با route.params.id$ به مقدار پارامتر ایدی دسترسی داشته باشید.شاید الان وقت مناسبی باشه که در حین این مطلب به یک نکته هم اشاره کنیم. وقتی route داره تغییر میکنه اگر قصد دارید یک عملیاتی انجام بدید میتونید این کد رو به فایل روتر پروژتون اضافه کنید تا به url فعلی و url مقصد دسترسی داشته باشید :router.beforeEach((to, from) => { // انجام عملیات دلخواه });خب حالا فهمیدیم چطور پارامترهامون رو ارسال و دریافت کنیم اما خب نکته ی قابل توجه اینه که وقتی شما به روشی که گفته شد پارامتری رو ارسال میکنید ، به کمک / از عبارت های قبل و بعد جدا میشه مثلا میشه :/User/12/اما خب ممکنه شما بخواید به صورت (/User-12/) پارامتر رو ارسال کنید و یا اینکه بخواید بگید اگر کاربر مسیری که شما تعریف نکردید رو وارد کرد ، به کامپوننت مد نظرتون بره، خب چطور انجامش بدیم؟به راحتی مثل قطعه کد زیر :خب جالب شد ! اما اگر بخوایم اطلاعات مسیر فعلیمون رو از جمله کوئری ها ، هش ها و ... رو حفظ کنیم و علاوه بر اون ، مسیر وارد شده توسط کاربر رو هم به عنوان یک پارامتر به صفحه ی NotFound بفرستیم باید چیکار کنیم ؟در کد زیر میتونید جوابش رو ببینید 😉خب تا اینجا کاربرد های جالبی از Vue Router دیدیم اما این تمام ماجرا نیست ، Vue Router خیلی فراتر از این حرفاست😎مثلا فکر کنید شما دو تا route دارید ، اولی /user/id که میتونه در عمل به شکل /user/2 باشه و دومی user/name که در عمل میتونه به شکل user/ali باشه و قصد دارید هر کدوم رو به یک صفحه ی جداگانه هدایت کنید؛ حالا چیکار میکنید ؟🤔خب شاید براتون هیجان انگیز باشه که بدونید شما میتونید از regex ها در Vue Router استفاده کنید ، نگاهی به مثال زیر بندازید :اینجا orderId طبق regex اعلام شده ، فقط میتونه عددی باشه اما productName میتونه هر چیزی باشه.پس راحت میتونید کاری که گفتیم رو انجام بدید .خب حالا که بحث regex ها شد شاید بد نباشه به این نکته هم اشاره کنیم. اگر خواستید یک پارامتر رو در url به صورت تکرار شونده استفاده کنید میتونید از کد زیر استفاده کنید :🪄اگر خواستید جزئیات و مثال های بیشتر از استفاده ی regex ها ببینید ، یه نگاهی به داکیومنت vue بندازید.در Vue Router به صورت پیش فرض مسیر ها به حروف کوچک و بزرگ حساس هستن یعنی /user و /User متفاوت هستند و به صفحات متفاوتی هدایت میشن . اما خب اگر خواستید در برخی مسیر ها این حساسیت اعمال بشه و در برخی مسیر ها نادیده گرفته بشه میتونید مثل کد زیر عمل کنید :این نکته ی ساده اما کاربری رو هم بدونید که میتونید در route ها به یک مسیر نام بدید و از نام مسیر به جای pathهنگام هدایت استفاده کنید؛ مثل کد زیر :که خب اینکار فوایدی مثل عدم استفاده از هاردکد path ها ، جلوگیری از اشتباهات تایپی در path ها و ... داره.البته باید نام ها یکتا باشن و اگر از یک نام برای چند مسیر استفاده کنید ، فقط اخرین مسیر توسط روتر حفظ میشه.امیدوارم این پست براتون مفید باشه 🫡پ ن : تمام عکس ها و نمونه کد ها از داکیومنت vue هستند. ریحانه پردل ریحانه پردل Tue, 30 Jul 2024 14:58:58 +0330 https://virgool.io/@r.pordel1380/%D9%85%D8%B3%DB%8C%D8%B1-%DB%8C%D8%A7%D8%A8%DB%8C-routing-%D8%AF%D8%B1-vue-js-jxp0hyrtg02m سلام امروز میخوام در مورد Vue Router کمی صحبت کنم. میدونم که اکثرا باهاش اشنا هستید اما شاید بد نباشه یه معرفی کوتاهی در موردش بگیم.کمی قبل تر که از multiple-page application ها استفاده میشد ، routing ( مسیر یابی ) ما هم سمت سرور بود یعنی در واقع URL درخواستی کاربر رو به سرور ارسال میکردیم و سرور در پاسخ اون یک HTML ارسال میکرد که کل صفحه با HTML جدید مجددا باگذاری میشد.اما امروزه که از Single-page application ها استفاده میکنیم دیگه نیازی به بارگیری مجدد از سمت سرور نداریم بلکه در سمت کلاینت میتونیم routing رو انجام بدیم و به صورت پویا تغییرات رو بگیریم و بدون بارگذاری مجدد کامل صفحه ، صفحه رو به روز رسانی کنیم.این موضوع باعث تجربه ی کاربری بهتر و سریع تر میشه خصوصا برای وقتی که کاربر تعامل بالایی با برنامه داره ، و خب این رو هم بگیم که برای بحث routing در vue کتابخانه ی رسمی Vue Router توصیه میشه.خب شاید بد نباشه به کد زیر یه نگاهی بندازیم که بدون استفاده از کتابخونه ای و با کمک hashchange بحث مسیر یابی رو پیاده سازی کرده :خب اما در اصل نیازی به پیاده سازی این کد نیست و خیلی راحت به جای استفاده از تگ a میتونیم از RouterLink و RouterView استفاده کنیم تا بدون بارگیری مجدد صفحه url رو تغییر بدیم. در واقع شما با کلیک بر روی لینک مد نظرتون که با RouterLink مشخص شده ، به RouterView اعلام میکنید که چه صفحه ای باید نمایش داده بشه و url مد نظرتون چیه . به همین راحتی 😃حالا نمونه کدش رو هم ببینیم :خب تا اینجا راحت میتونید یک منو ایجاد کنید که با کلیک روی گزینه های مختلف اون بین صفحات مختلف سایتتون جا بجا بشید . اما حالا فرض کنید میخوایم مثلا وقتی کاربر روی دکمه ی ثبت نام کلیک کرد یا ... ،در بخش منطقی کدمون ، صفحه رو بدون کدهای اضافی و سخت تغییر بدیم. باید چیکار کنیم؟خب اینجا دیگه پروژتون جدی تر شده و نیازه که یک فایل مخصوص روتر ایجاد کنید . که در اون route های پروژتون رو تعریف کنید و روتری ایجاد کنید که مسیر یابی رو در پروژتون مدیریت کنه. اینجا یک نمونه کد خیلی ساده ازش رو میتونید ببینید :البته یادتون نره بعد از اینکه router مد نظرتون رو ایجاد کردید باید با استفاده از فراخوانی تابع use() به عنوان یک پلاگین اون رو در برنامتون معرفی کنید . به صورت زیر :خب تا اینجا روتر های شما به صورت گلوبال در پروژه معرفی شدن و میتونید از $route و $router و useRouter() و useRoute() در سراسر برنامتون استفاده کنید.که البته در ادامه بیشتر درموردشون توضیح میدم.خب حالا یه برگشت به عقب بزنیم ، ما گفتیم میخوایم داخل منطق کدمون url رو تغییر بدیم و به یه مسیر دیگه بریم و خب راه حلی که براش گفتیم ایجاد فایل روتر بود . خب حالا فایل رو ساختیم اما چطور داخل بخش منطقی کدمون مسیر رو تغییر بدیم ؟ به راحتی مثل کد زیر 😉اما اگر از Composition API استفاده میکنید ( اگر نمیدونید چیه شاید بد نباشه پست قبلی رو یه نگاهی بندازید ) دیگه با this دسترسی به روتر ندارید پس شاید جالب باشه نمونه کد این حالت رو هم ببینید :امیداورم این پست که توضیح مقدماتی مسیر یابی در vue بود به کارتون بیاد . در پست بعدی بیشتر در موردش صحبت میکنیم و نکات ریزتری رو برسی میکنیم 🥰پ ن : تمام عکس ها و نمونه کد ها از داکیومنت vue هستند. ریحانه پردل ریحانه پردل Tue, 30 Jul 2024 13:17:44 +0330 https://virgool.io/@r.pordel1380/composition-api-%D9%88-options-api-h8yo25nnij8e سلام دوستان. امیدوارم که حال دلتون تو این روزای گرم تابستونی خوب باشه. امروز میخوام یافته های خودم رو در مورد Composition API با شما به اشتراک بزارم:خب اول از این شروع کنیم که اصلا Composition API چی هست؟شاید بهتره قبل از اون یه معرفی کوتاهی از Options API داشته باشیم. Options API در واقع سبک کد نویسی در vue 2 بود که هر چیزی جای خودشو داشت مثلا متغیر ها داخل data توابع داخل methods و ... .خب تا اینجا همه چیز اوکی بود و یه کد منسجم داشتیم اما مشکل کجا ایجاد میشد؟دقیقا وقتی پیچیدگی یک کامپوننت از حدی فراتر میرفت و اون موقع بود که مدیریت فرایند ها داخل اون کامپوننت مشکل میشد . مثلا اگر یک کامپوننتی مسئول بار‌گذاری عکس ، ویرایش عکس ، تغییر نام پروفایل و ... بود و میخواستیم یه قسمتی از کدمون رو ویرایش کنیم ، مدام باید برمیگشتیم به تابع data متغییرمون رو چک میکردیم بعد داخل methods توابعمون رو چک میکردیم و این عملا در پروژه های بزرگ مشکل ساز میشد چون اسکرول مداوم کلافمون میکرد.حالا فکر کنید قسمت کد مربوط به بار‌گذاری عکس رو میخواستیم داخل یک کامپوننت دیگه استفاده کنیم .خب منطقا راه تمیز تر استفاده از mixin ها بود که قطعه کد مربوط به بار‌گذاری عکس رو به یک mixin منتقل میکردیم تا هر جایی که میخوایم از اون استفاده کنیم. اما خب چالش چیه؟اول اینکه اگر داخل یک کامپوننت چند تا mixin داشتیم سخت بود بررسی کنیم کدوم پراپرتی توسط کدوم mixin داره تزریق میشه از طرفی ممکن بود پراپرتی های داخل چند mixin نام های یکسانی داشته باشن و این تداخل ایجاد کنه و همه چیزو بهم بریزه .و اما مشکل سوم هم این بود که ما گاهی نیاز داشتیم mixin هامون با هم تعامل داشته باشن و هر دو تا بخوان به یه پراپرتی مشترک دسترسی داشته باشن که خود این برای ما ایجاد مشکل میکرد به همین دلایل بود که اومدن گفتن در vue 3 استفاده از mixin ها اصلا توصیه نمیشه.خب حالا دو تا مشکل اساسی داریم : یکی مشکلات مدیریت کامپوننت ها در سبک Options API و دیگری هم مشکلات mixin هااما خب مشکل بعدیمون اینه خیلی از توسعه دهندگان ویو تمایل دارن از تایپ اسکریپت استفاده کن اما Options API بدون در نظر گرفتن type inference طراحی شده بود و عملا شما نیازی به مشخص کردن نوع متغیر ها و ... نداشتید و این توسعه دهندگان رو مجبور میکرد برای استفاده از تایپ اسکریپت از راه های پیچیده و غیر منطقی استفاده کنن و حتی با همه ی این راه ها هم باز ممکن به به شکست بخورن.حالا سه تا مشکل داریم اما راه حل چیه؟یک وجه تمایز بزرگ vue 2 و vue 3 همین Composition API هست که این مشکلات رو حل میکنه . در واقع Composition API مجموعه ای از api هاست که به ما این امکان رو میده به جای تعریف اپشن ها از ایمپورت کردن توابع استفاده کنیم .حالا مزیت هاش نسبت به Options API چیه؟اول اینکه به شما اجازه میده به صورت تمیز و بهینه کدتون رو در کامپوننت های مختلف استفاده کنید.از طرفی یک کد انعطاف پذیر بهتون میده که هر تابعی کنار متغییر هاش و ... تعریف میشه و عملا وقتی پیچیدگی کامپوننتون زیاد میشه مشکل مدیریتی ندارید.مزیت سومش اینه که راحت میتونید از تایپ اسکریپت استفاده کنید بدون مشکل های قبلی و اما مزیت اخرش هم باندل پروداکشن کوچک‌تر هست.خب حالا سوال اینه که از کدوم استفاده کنیم Composition API یا Options API ؟خب دیگه این به خودتون بستگی داره که با کدوم بیشتر راحتید چون Options API قرار نیست منسوخ بشه .اما خب توصیه ی کلی اینه برای پروژه های مقیاس بزرگ از Composition API استفاده کنید تا مزایای فراوانش رو ببینید. البته میتونید از هر دو هم در یک پروژه استفاده کنید که اینکار خیلی توصیه نمیشه. اگر خواستید میتونید نمونه کد های Composition API و Options API رو اینجا ببینید و مقایسه کنید. Options API: https://github.com/vuejs/vue-cli/blob/a09407dd5b9f18ace7501ddb603b95e31d6d93c0/packages/@vue/cli-ui/src/components/folder/FolderExplorer.vue#L198-L404 Composition API: https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e ریحانه پردل ریحانه پردل Sun, 28 Jul 2024 10:42:14 +0330