Как получить доступ к текущему маршруту с помощью компонента Blazor
Этот заголовок вводит в заблуждение, и вы должны его изменить. Вы не можете получить доступ к текущему маршруту для выполнения этой задачи, поскольку текущий маршрут еще не существует
Я искал этот вопрос несколько раз, и каждое решение не сработало для меня, использование HttpContext также не сработало.
Опять же, решение не в использовании текущего маршрута, поскольку маршрут еще не был создан. Ваши компоненты еще не созданы, поэтому маршрут недоступен
HttpContext недоступен в Blazor, большую часть времени, если вообще ...
Решение:
Добавьте этот код в компонент MainLayout
Определите свойство типа Type. Это свойство будет заполнено типом (компонентом), который будет создан
Тип компонента можно получить из метода OnParametersSet компонента MainLayout
Когда вы запускаете свой проект, типом является индекс (обратите внимание, что он возвращается в форме: <projectname>.Pages.Index)
Если вы вводите в браузере URL-адрес вашего приложения + "/ counter", например: https://localhost:44373/counter, вы получите <projectname>.Pages.Counter
@ code {
public Type PageType { get; set; }
protected override void OnParametersSet()
{
PageType = (this.Body.Target as RouteView)?.RouteData.PageType;
Console.WriteLine("This is your type (current type)" +
PageType);
}
}
В верхней части файла MainLayout.razor создается экземпляр <NavMenu />. Добавьте к нему параметр атрибута с именем PageType, как показано ниже:
<NavMenu PageType="@PageType" />
PageType слева должен быть определен в компоненте NavMenu. Как видите, он привязан к свойству PageType, определенному в MainLayout.
Теперь вы должны определить свойство параметра с именем PageType в NavMenu следующим образом:
NavMenu.razor
@code {
[Parameter]
public Type PageType { get; set; }
}
Теперь у вас есть текущий Тип (компонент ), доступный в вашем компоненте NavMenu, и вы можете использовать его по своему усмотрению.
Важно, чтобы вы понимали, как компоненты визуализируются ... что идет первым, затем et c. И многое другое ...
Но, эй, вам будет сложно управлять своей задачей ... Следующий фрагмент кода очень грубо демонстрирует, что то, что вы собираетесь сделать, выполнимо (мой код отлично и выполняет свою работу, и проблемы, которые у вас могут возникнуть, не связаны с этим).
NavMenu.razor
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
@switch (PageType.ToString())
{
case "BlazorApp4.Pages.Index":
@*<header>
<div>
<nav>
<ul class="main-menu">
<li id="CurPage">Home</li>
<li class="menu-item">Shop</li>
<li class="menu-item">FAQ</li>
<li class="menu-item">About</li>
</ul>
</nav>
</div>
</header>*@
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
break;
case "Shop":
<header>
<div>
<nav>
<ul class="main-menu">
<li class="menu-item">Home</li>
<li id="CurPage">Shop</li>
<li class="menu-item">FAQ</li>
<li class="menu-item">About</li>
</ul>
</nav>
</div>
</header>
break;
case "FAQ":
<header>
<div>
<nav>
<ul class="main-menu">
<li class="menu-item">Home</li>
<li Class="menu-item">Shop</li>
<li id="CurPage">FAQ</li>
<li class="menu-item">About</li>
</ul>
</nav>
</div>
</header>
break;
case "About":
<header>
<div>
<nav>
<ul class="main-menu">
<li class="menu-item">Home</li>
<li class="menu-item">Shop</li>
<li class="menu-item">FAQ</li>
<li id="CurPage">About</li>
</ul>
</nav>
</div>
</header>
break;
}
</div>
В приведенном выше коде будут отображаться ссылки по умолчанию на страницы шаблонов по умолчанию, когда вы запускаете свою страницу. (Индексная страница). Закомментируйте код в case "BlazorApp4.Pages.Index: и раскомментируйте свой код (...), расположенный в case "BlazorApp4.Pages.Index":
И вот, полная темнота ... вот и ваши усилия ... усердно работайте .. . удачи.