قابلیت Enhanced Navigation یا ناوبری پیشرفته در Blazor 8 چیست ؟

پاسخ هوش مصنوعی

قابلیت Enhanced Navigation در Blazor 8 بهبودهای قابل توجهی در مورد ناوبری صفحات و مدیریت وضعیت در برنامه های وب Blazor ارایه می دهد. این قابلیت شامل ویژگی های زیر است:

• مدیریت وضعیت URL: با Enhanced Navigation، می توان URL های دقیق تری ایجاد کرد که به راحتی وضعیت و فازهای مختلف برنامه را نمایان می سازد.
• ناوبری آسانتر: کاربران می توانند براحتی بین صفحات با عمل ناوبری به جلو و عقب حرکت کنند، بدون اینکه نیاز به بارگذاری مجدد صفحه باشد.
• پشتیبانی از مسیرهای داینامیک: این قابلیت به توسعه دهندگان اجازه می دهد تا مسیرهای داینامیک و حاوی پارامتر را به طور مؤثرتر مدیریت کنند.
• واسط کاربری بیشتر: قابلیت های جدیدی برای ایجاد ترکیب های جاوا اسکریپت و Blazor برای تجزیه و تحلیل ناوبری و تعامل با APIهای ناوبری استفاده شده است.

به طور کلی، Enhanced Navigation در Blazor 8 روی تجربه کاربری و عملکرد ناوبری در برنامه های وب متمرکز است و به توسعه دهندگان ابزارهای بیشتری برای ایجاد برنامه هایی با قابلیت های پیشرفته تر می دهد.

ناوبری پیشرفته یا Enhanced Navigation در Blazor dot net 8

یکی از قابلیت هایی که در دات نت 8 به Blazor افزوده شده است Enhanced Navigation می باشد. این قابلیت بر روی لینک ها در Blazor اعمال می شود. همانطور که می دانیم در Blazor برای نمایش و استفاده از یک لینک از تگ NavLink به جای تگ a استفاده می شود. به طور پیش فرض تگ NavLink قابلیت ناوبری پیشرفته را دارد ولی شما می توانید به صورت دستی هم این قابلیت را فعال یا غیرفعال کنید.

کاربرد Enhanced Navigation چیست ؟

به طور ساده اگر این قابلیت را برای یک لینک در Blazor فعال کنید باعث می شود بعد از باز شدن محتویات لینک صفحه رفرش نشود و محتویات سایت (فایل های js، css و ...) مجددا از سرور سایت دریافت نشود. اما اگر این قابلیت را غیرفعال کنید مشابه یک لینک معمولی (تگ a) عمل می شود و تمامی محتویات سایت مجددا از سرور لود می شود و عملا سایت یکبار رفرش می شود.

ناوبری پیشرفته باعث افزایش سرعت سایت و یک تجربه کاربری بهتر برای کاربر نهایی خواهد بود.

چگونه از Enhanced Navigation استفاده کنیم ؟

همانطور که گفته شد این قابلیت به صورت پیش فرض روی NavLink ها فعال می باشد و نیاز نیست کاری انجام دهید. اما برای غیرفعال کردن یا فعال کردن به صورت دستی می توانید به صورت زیر عمل کنید.

<NavLink class="nav-link" href="" Match="NavLinkMatch.All" data-enhance-nav="false">
   <span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>

<NavLink class="nav-link" href="counter" data-enhance-nav="true">
   <span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>

همونطوری که می بینید با استفاده از data-enhance-nav می تونید این قابلیت رو فعال یا غیرفعال کنید.