Question

您好如何使用参数重定向到Blazor中的另一页？

@page "/auth"
@using Microsoft.AspNetCore.Blazor.Services;
@inject AuthService auth
@inject IUriHelper urihelper;

<input type="text" bind="@Username" />
<button onclick="@AuthAsync">Authenticate</button>



@functions{

    public string Username { get; set; }
    public string url = "/home";

    public async Task AuthAsync()
    {
        var ticket=await this.auth.AuthenticateAsync(Username);
        urihelper.NavigateTo(url); //i see no overload that accepts parameters
    }
}

在这种情况下，我想导航到/home页面，并给它一个字符串作为参数。

Answer 1

执行以下操作：

创建一个home.cshtml文件页面，如下所示：请注意，由于尚不支持可选参数，因此使用了两个@page指令。第一个允许导航到不带参数的组件。第二个@page指令接受{username}路由参数，并将该值分配给Username属性。

Pages / home.cshtml

@page "/home"
@page "/home/{username}"

<h1>@Username is authenticated!</h1>

@functions {
    // Define a property to contain the parameter passed from the auth page
    [Parameter]
    private string Username { get; set; };
}

在您的auth.cshtml中完成

@功能{

public string Username { get; set; }
public string url = "/home";

public async Task AuthAsync()
{
    var ticket=await this.auth.AuthenticateAsync(Username);
    // Attach the parameter to the url
    urihelper.NavigateTo(url + "/" + Username); 
}

}

希望这对您有帮助...

Answer 2

目前您只能在URL中传递参数。

因此，如果您的home组件期望[Parameter] string Name，则需要提供一个/home/fred的URL，并且fred将被传递到home组件的Name参数中

如果您要传递更复杂的数据，则必须考虑通过某种服务来进行。

以下是有关路由参数的官方文档的链接：https://blazor.net/docs/routing.html#route-parameters

使用参数

2 个答案:

Pages / home.cshtml