سلام به همگی .امیدوارم که روزگار بر وفق مرادتون باشه . در این پست میخوام کمی بیشتر در مورد مسیریابی (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 هستند.
