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

Question

我有一个 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;
}

Answer 1

我用了

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

在 App.Razor 中，使当前的路由数据作为级联参数可供所有组件使用。

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

RouteData 有一个属性“PageType”，其中包含当前路由的页面组件的类型。

Answer 2

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

@page "/navigate"
@inject NavigationManager NavigationManager

@code {
   string CurrUrl = null;
   protected override void OnInitialized()
   {
       CurrUrl = NavigationManager.Uri.ToString();
   }
}

文档

Answer 3

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

这个标题具有误导性，你应该更改它。您无法访问当前路线来执行该任务，因为当前路线尚不存在

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

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

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

解决方案：

将此代码添加到 MainLayout 组件中

1. 定义类型为 Type 的属性。该属性将使用要创建的类型（组件）进行填充

2. 您可以从 MainLayout 组件的 OnParametersSet 方法检索组件的类型

3. 当您启动项目时，类型为索引（请注意，它以以下形式返回：<projectname>.Pages.Index)

4. 如果您在浏览器中输入应用程序的网址+“/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 组件中定义。正如您所看到的，它绑定到PageTypeMainLayout 中定义的属性。

PageType现在您应该像这样定义在 NavMenu 中命名的参数属性：

导航菜单.razor

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

现在，您的 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":

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