如何使用Blazor组件访问当前路由

我有一个ASP(dot(NET web应用程序，它有一个简单的导航栏，我正在尝试使用Blazor组件，如果页面恰好是活动页面，它将更改导航栏并增加左边框的宽度。到目前为止，我使用的是一个switch语句，它将基于由字符串表示的当前页面进行切换。我的问题是，我找不到一种以编程方式查找网站当前URL的方法。我已经多次搜索这个问题，但每个解决方案都不适用于我，使用HttpContext也不适用。

switch (CurrUrl)
{
case "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>
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;
}
@code {
string CurrUrl = null;
}

我使用

<CascadingValue Name="RouteData" Value="routeData"> ... </CascadingValue>

在应用程序中。Razor使当前路由数据作为级联参数可用于所有组件。

[CascadingParameter(Name = "RouteData")]
public RouteData? RouteData { get; set; }

RouteData的属性"PageType"包含当前路由的Page组件的类型。

您可以从导航管理器获取当前URL。

@page "/navigate"
@inject NavigationManager NavigationManager
@code {
string CurrUrl = null;
protected override void OnInitialized()
{
CurrUrl = NavigationManager.Uri.ToString();
}
}

文档

如何使用Blazor组件访问当前路由

此标题具有误导性，您应该更改它。您无法访问当前路由，以便执行该任务，就像当前路由一样尚未存在

我已经多次搜索这个问题，每个解决方案都有对我来说不起作用，使用HttpContext也不起作用。

同样，解决方案不是使用当前路由，因为没有路由已创建。您的组件尚未创建，因此没有路由可用

HttpContext在Blazor中不可用，大多数时候，如果有的话。。。

解决方案：

将此代码添加到主布局组件

定义类型为type的属性。此属性将填充要创建的类型(组件(
您可以从OnParametersSet中检索组件的类型主布局组件的方法
启动项目时，"类型"为"索引"(注意，返回形式为：<projectname>.Pages.Index)
如果你在浏览器中键入你的应用程序的url+"/计数器"；，例如：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组件中定义。如您所见，它绑定到MainLayout中定义的PageType属性。

现在，您应该在NavMenu中定义名为PageType的参数属性，如下所示：

导航菜单.razor

@code {
[Parameter]
public Type PageType { get; set; }
}

现在，您的导航菜单中有可用的当前类型(组件(组件，您可以随心所欲地使用它。

了解组件的渲染方式至关重要。。。哪个先到，哪个下一个等等，还有更多。。。

但是，嘿，你将很难管理你的任务。。。下面的代码片段非常粗略地展示了您打算做的事情是可行的(我的代码很好，可以完成任务，您将要遇到的问题与它无关(。

导航菜单.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":下的代码(…(

瞧，一片漆黑。。。你的痛苦来了。。。努力工作。。。祝你好运

导航菜单.razor

导航菜单.razor

相关内容

最新更新

热门标签：