سلام امروز میخوام در مورد 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 هستند.
