Blazor @page 路由 url 用变量定义

Question

我有一个关于 Blazor 服务器端的问题。

我想用变量或属性定义@page 路由 url。

我现在可以使用以下默认方法

@page "/route-url"

<h1>Page Test</h1>

@code {
    
}

但我想使用如下方法

@page MenuItem.Role

<h1>Page Test</h1>

@code {
    
}

我试过上面的方法然后抛出异常。像下面的例外。

C:\Projects\TestBlazorProject\Pages\TestPage.razor(1,7): error RZ1016: The 'page' directive expects a string surrounded by double quotes. [C:\Projects\TestBlazorProject\TestBlazorProject.csproj]

如何使用任何不同的变量或任何类属性定义@page 路由url？

Answer 1

@page 不是 C#，而是 Razor 语言。 Razor 文件在编译过程中被预编译成 c# 文件。

例如，这是 Index.razor (Index.razor.g.cs) 的 C# 预编译文件的重要部分：

[Microsoft.AspNetCore.Components.RouteAttribute("/")]
public partial class Index : Microsoft.AspNetCore.Components.ComponentBase
{
    #pragma warning disable 1998
    protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
    {
        __builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\nWelcome to your new app.\r\n\r\n");
        __builder.OpenComponent<Blazor.Starter.Shared.SurveyPrompt>(1);
        __builder.AddAttribute(2, "Title", "How is Blazor working for you?");
        __builder.CloseComponent();
    }
    #pragma warning restore 1998
}

注意@page 已成为编译时属性[Microsoft.AspNetCore.Components.RouteAttribute("/")]。它在编译时固定，您无法在运行时更改它。

路由是这样设置的，因为当应用程序通过拖网任何具有Route 属性的组件类的应用程序程序集进行加载时，路由器会构建一个路由映射 - 本质上是一个路由 url/组件类对的字典。在路由事件中，它读取新的 url，找到组件类并将其加载到布局中。任何变量（大括号中的内容）都以Parameters 的形式传递到组件中。

你还没有说清楚下面这行应该做什么：

@page MenuItem.Role

1. 是否要将路由中提供的变量捕获到MenuItem.Role？
2. 是否要将此页面的路由设置为MenuItem.Role 中的值？

如果为 1，则其他答案都适合您。如果是 2，则需要考虑编写自己的路由器。这里是一个超出简单答案的主题。

Answer 2

我认为您可以通过以下方式实现这一目标。

@page "/{Role}"

@code{
    [Parameter]
    public string Role { get; set; }
}