آموزش Vue.js: مدیریت URL با Vue Router – بخش دهم و پایانی

در وب‌اپلیکیشن‌های جاوا اسکریپت منظور از مسیر بخشی است که نمای نمایش یافته کنونی را با محتوای نوار آدرس مرورگر همگام‌سازی می‌کند. به بیان دیگر بخشی است که تغییرات URL را در زمان کلیک کردن روی چیزی در صفحه بر عهده دارد و به نمایش نمای مناسب در زمان کلیک روی یک URL خاص کمک می‌کند. در این مقاله که آخرین بخش از این سری مقالات است به توضیح روش مدیریت URL با Vue Router می‌پردازیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:

• آموزش Vue.js: ارتباط بین کامپوننت‌ها و مدیریت حالت با Vuex — بخش نهم

به طور سنتی وب بر مبنای URL-ها ساخته شده است. زمانی که روی یک URL خاص کلیک می‌کنید، صفحه مربوطه نمایش پیدا می‌کند. با معرفی اپلیکیشن‌هایی که درون مرورگر اجرا می‌شوند و چیزی که کاربر می‌بیند را تغییر می‌دهند، بسیاری از اپلیکیشن‌ها این تعامل را کنار گذاشتند و شما باید URL را به صورت دستی با API History مرورگر به‌روزرسانی کنید. بدین ترتیب زمانی که می‌خواهید URL-ها را با View-ها در اپلیکیشن همگام‌سازی کند به «مسیریاب» (Router) نیاز دارید.

کتابخانه Vue Router روشی برای اجرای کارهای فوق در اپلیکیشن‌های Vue محسوب می‌شود. Vue استفاده از این کتابخانه را الزام نکرده است. می‌توانید از هر کتابخانه مسیریابی دیگری که می‌خواهید نیز استفاده کنید و یا یکپارچه‌سازی History API خاص خود را بسازید، اما مزیت استفاده از Vue Router در رسمی بودن آن است.

این بدان معنی است که این کتابخانه از سوی همان افرادی نگهداری می‌شود که خود Vue را نوشته‌اند و از این رو یکپارچگی بهتری با این فریمورک دارد و تضمین می‌کند که در آینده نیز هر اتفاقی بیفتد، همواره با این فریمورک سازگار خواهد بود.

نصب

Vue Router از طریق NPM در پکیجی به نام vue-router ارائه شده است.

اگر از Vue از طریق تگ اسکریپت استفاده می‌کنید، می‌توانید به روش زیر vue-router را در پروژه خود بگنجانید:

«UNPKG» (+) یک ابزار بسیار کارآمد است که ارائه پکیج‌های npm در مرورگر را با یک لینک ساده به راحتی انجام می‌دهد. اگر از Vue CLI استفاده می‌کنید، آن را با دستور زیر نصب کنید:

npm install vue-router

زمانی که vue-router نصب شد و از طریق استفاده از تگ اسکریپت یا Vue CLI در دسترس قرار گرفت می‌توانید آن را در اپلیکیشن خود ایمپورت کنید. این کتابخانه را پس از vue ایمپورت کرده و با فراخوانی Vue.use(VueRouter) آن را درون اپلیکیشن نصب کنید:

پس از فراخوانی ()Vue.use شیء مسیریاب در هر کامپوننت اپلیکیشن که به این اشیا دسترسی دارند، ارسال می‌شود:

• this.$router شیء مسیریاب است.
• this.$route شیء مسیر است.

شیء مسیریاب

شیء مسیریاب که پس از نصب Vue Router در کامپوننت Root ویو از طریق this.$router در هر کامپوننت در دسترس ما است، قابلیت‌های زیبای زیادی دارد. برای نمونه می‌توانیم کاری کنیم که اپلیکیشن با استفاده از دستورهای زیر به مسیر جدیدی بروید:

• this.$router.push()
• this.$router.replace()
• this.$router.go()

این دستورها شبیه متدهای pushState ،replaceState و go در pushState ،replaceState and go هستند.

• ()push برای رفتن به مسیر جدید استفاده می‌شود و یک آیتم جدید به تاریخچه مرورگر اضافه می‌کند.
• ()replace نیز همان است به جز این که یک حالت جدید به تاریخچه ارسال نمی‌کند.

در ادامه مثال‌هایی از این دستورها ارائه شده است:

()go به پس و پیش می‌رود و عددی قبول می‌کند که می‌تواند مثبت یا منفی باشد تا بتوانیم در تاریخچه به عقب حرکت کنیم:

تعریف کردن مسیرها

ما در این مثال از کامپوننت تک فایلی (SFC) در Vue استفاده می‌کنیم. در قالب از یک تگ nav که دارای سه کامپوننت router-link است استفاده می‌کنیم. هر کدام از این‌ها به ترتیب دارای برچسب‌های Home ،Login و About هستند. یک URL از طریق خصوصیت go اختصاص یافته است. کامپوننت router-view جایی است که Vue Router محتوایی که با URL جاری مطابقت دارد قرار می‌دهد.

کامپوننت router-link به طور پیش‌فرض یک تگ a را رندر می‌کند. هر بار که مسیر تغییر می‌یابد، چه این تغییر از طریق یک کلیک روی لینک باشد و چه با تغییر دادن URL باشد، یک کلاس router-link-active به عنصری که به مسیر فعال اشاره می‌کند، اضافه می‌شود و امکان استایل‌بندی آن را فراهم می‌سازد. در بخش جاوا اسکریپت ابتدا مسیریاب را قرار داده و نصب می‌کنیم و سپس 3 کامپوننت route تعریف می‌کنیم. این کامپوننت‌ها را به مقداردهی اولیه شیء router ارسال می‌کنیم و این شیء را نیز به وهله root ویو می‌فرستیم.

کد آن چنین است:

به طور معمول در یک اپلیکیشن Vue اپلیکیشن root با استفاده از دستور زیر وهله‌سازی شده و نصب می‌شود:

زمانی که از Vue Router استفاده می‌کنیم، دیگر مشخصه render را ارسال نمی‌کنیم، بلکه به جای آن از router بهره می‌گیریم. ساختار مورد استفاده در مثال فوق چنین است:

که خلاصه شده کد زیر است:

در مثال فوق می‌بینیم که یک آرایه routes به سازنده VueRouter ارسال شده است. هر مسیر در این آرایه دارای پارامترهای path و component است. اگر یک پارامتر name نیز ارسال کرده باشید، دارای یک مسیر نامدار خواهید بود.

استفاده از مسیرهای نامدار برای ارسال پارامترها به متدهای push و replace مسیریاب

اگر به خاطر داشته باشید در بخش قبل از شیء Router برای ارسال یک حالت جدید استفاده کردیم:

در مسیر نامدار می‌توانیم پارامترها را برای مسیر جدید ارسال کنید:

همین واقعیت در مورد ()replace نیز صدق می‌کند:

زمانی که کاربر روی یک router-link کلیک می‌کند، چه اتفاقی می‌افتد؟

اپلیکیشن در این حالت کامپوننت مسیر را که با URL ارسالی به لینک مطابقت دارد، رندر خواهد کرد. کامپوننت مسیر جدید که URL را مدیریت می‌کند، وهله‌سازی شده و گاردهای آن فراخوانی می‌شود و کامپوننت مسیر قدیمی تخریب خواهد شد.

گاردهای مسیر

از آنجا که در بخش قبل به گاردها اشاره کردیم، لازم است که کمی در مورد آن توضیح دهیم. گاردها را می‌توان قلاب‌ها یا میان‌افزار چرخه عمر تصور کرد که تابع‌هایی هستند که در زمان‌های خاص در طی اجرای اپلیکیشن فراخوانی می‌شوند. بدین ترتیب می‌توان در اجرای مسیر پرش‌هایی داشت و ترتیب اجرای آن را تغییر داد یا درخواست را هدایت مجدد کرده و لغو نمود.

فیلم آموزش پروژه محور ویو جی اس و لاراول – طراحی وب اپلیکیشن پیش رونده PWA با Vue.js و Laravel در فرادرس

کلیک کنید

از گاردهای سراسری می‌توان با افزودن callback به مشخصه ()beforeEach و ()afterEach مسیریاب استفاده کرد.

• ()beforeEach پیش از تأیید ناوبری فراخوانی می‌شود.
• ()beforeResolve زمانی فراخوانی می‌شود که beforeEach اجرا شود و همه گاردهای کامپوننت‌های beforeRouterEnter و beforeRouteUpdate فراخوانی شوند، اما اجرای آن پیش از تأیید ناوبری است.
• ()afterEach پس از تأیید ناوبری اجرا می‌شود.

منظور از تأیید ناوبری در بندهای فوق را کمی بعدتر توضیح خواهیم داد. در حال حاضر آن را می‌توانید به عنوان اجازه رفتن اپلیکیشن به یک مسیر فرض کنید.

کاربرد آن چنین است:

مقادیر to و from نماینده اشیای مسیر هستند و نشان می‌دهند که از to آمده و به from می‌رویم. beforeEach یک پارامتر next دیگر هم دارد که در صورت فراخوانی با پارامتر false ظاهر می‌شود و ناوبری را مسدود می‌کند و از تأیید آن جلوگیری می‌کند. اگر با میان‌افزارهای Node آشنا باشید، می‌دانید که next()‎ نیز باید همواره فراخوانی شود، چون در غیر این صورت اجرا متوقف می‌شود.

کامپوننت‌های تک مسیری نیز گارد دارند:

• beforeRouteEnter(from, to, next) پیش از تغییر مسیر جاری فراخوانی می‌شود.
• beforeRouteUpdate(from, to, next) زمانی فراخوانی می‌شود که مسیر تغییر یابد، اما کامپوننتی که آن را مدیریت می‌کند، همچنان همان باشد. (این کار از طریق مسیریابی دینامیک که در بخش بعدی توضیح داده‌ایم امکان‌پذیر است)
• beforeRouteLeave(from, to, next) زمانی فراخوانی می‌شود که از مکان فعال برویم.

در بخش قبلی از ناوبری صحبت کردیم، Vue Router برای تعیین این که ناوبری به یک مسیر تأیید شده یا نه بررسی‌های زیر را انجام می‌دهد:

• گارد beforeRouteLeave را در کامپوننت (های) جاری فرا می‌خواند.
• گارد ()beforeEach مسیر را فرا می‌خواند.
• ()beforeRouteUpdate را در هر کامپوننت که باید مجدداً استفاده شود (در صورت وجود) فرا می‌خواند.
• گارد ()beforeEnter را روی شیء مسیر فرا می‌خواند.
• ()beforeRouterEnter را در کامپوننتی که باید واردش شویم فرا می‌خواند.
• گارد ()beforeResolve مسیر را فرا می‌خواند.
• اگر همه موارد فوق برقرار باشند، ناوبری تأیید می‌شود.
• گارد ()afterEach مسیر را فرا می‌خواند.

می‌توانید از گاردهای خاص مسیر (beforeRouteEnter و beforeRouteUpdate در مورد مسیریابی دینامیک) به عنوان قلاب‌های چرخه عمر استفاده کنید. بدین ترتیب می‌توانید برای نمونه درخواست‌های واکشی داده را آغاز کنید.

مسیریابی دینامیک

مثال فوق یک view متفاوت را بر مبنای URL نمایش می‌دهد و مسیرهای /، login/ و about/ را مدیریت می‌کند.

در اغلب موارد نیاز داریم که مسیرهای دینامیک را مدیریت کنیم. این کار مانند داشتن پست‌های زیادی در مسیر /post/ است که هر کدام نامی مخصوص خود دارند:

• /post/first
• /post/another-post
• /post/hello-world

این وضعیت با استفاده از قطعه دینامیک میسر خواهد بود. این موارد قطعه‌های استاتیک هستند:

در ادامه یک قطعه دینامیک برای مدیریت پست‌های بلاگ اضافه می‌کنیم:

به استفاده از ساختار :post_slug توجه کنید. این بدان معنی است که می‌توانید از هر رشته‌ای استفاده کنید و این رشته به یک placeholder به نام post_slug نگاشت می‌شود. البته شما محدود به استفاده از این ساختار نیستید. Vue از این کتابخانه (+) برای تحلیل مسیرهای دینامیک استفاده می‌کند و می‌توانید از «عبارت‌های منظم» (Regular Expressions) نیز استفاده کنید.

اکنون درون کامپوننت مسیر Post می‌توانیم با استفاده از route$ به مسیر ارجاع بدهیم و با بهره‌گیری از route.params.post_slug$ نیز به نام پست اشاره می‌کنیم:

از این پارامتر برای بارگذاری محتوا از بک‌اند نیز می‌توان استفاده کرد. شما می‌توانید به هر تعداد که دوست دارید، قطعه‌های دینامیک در یک URL داشته باشید:

/post/:author/:post_slug

اگر به خاطر داشته باشید در بخش قبل در مورد اتفاقاتی که در زمان ناوبری کاربر به یک مسیر جدید می‌افتد صحبت کردیم. در مورد مسیرهای دینامیک اتفاقاتی که می‌افتند کمی متفاوت هستند.

Vue در این مورد به روش کارآمدتری عمل می‌کند و به جای تخریب کامپوننت مسیر جاری و وهله‌سازی مجدد از آن، از وهله جاری استفاده مجدد می‌کند. زمانی که این اتفاق بیفتد، Vue رویداد چرخه عمر beforeRouteUpdate را فراخوانی می‌کند. در اینجا می‌توان هر عملیاتی که لازم است را اجرا کرد:

استفاده از props

در مثال‌های فوق از *.route.params$ برای دسترسی به داده‌های مسیر استفاده کردیم. هیچ کامپوننتی نباید با مسیریاب تزویج سفت و سختی داشته باشد و به جای آن باید از props استفاده کرد:

به شیوه ارسال props: true به شیء route برای فعال‌سازی این کارکرد توجه کنید.

مسیرهای تودرتو

پیش‌تر اشاره کردیم که می‌توانیم به تعداد دلخواهی قطعه‌های دینامیک در یک URL مانند زیر داشته باشیم:

/post/:author/:post_slug

بنابراین یک کامپوننت Author داریم که مسئولیت مراقبت از قطعه دینامیک اول را بر عهده می‌گیرد:

می‌توانیم یک وهله کامپوننت router-view دوم را درون قالب Author قرار دهیم:

کامپوننت Post را اضافه می‌کنیم:

و سپس مسیر دینامیک درونی را در پیکربندی Vue Router تزریق می‌کنیم:

به این ترتیب به پایان این مقاله از سری مقالات آموزش جامع Vue.js می‌رسیم. این آخرین مقاله از این سری است و بنابراین این سری راهنماهای آموزشی نیز به آخر می‌رسند. امیدواریم این راهنمای جامع مورد توجه شما قرار گرفته باشد.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های برنامه نویسی جاوا اسکریپت
• مجموعه آموزش‌های برنامه‌‌نویسی
• پنج ابزار برای توسعه سریع اپلیکیشن های Vue.js — راهنمای کاربردی
• آموزش Vue.js: ایجاد نخستین اپلیکیشن با Vue CLI — بخش دوم
• آموزش Vue.js: کدنویسی عملی — بخش سوم

==