Blazor可选路由参数

Question

使用dotnet new blazor创建新的blazor项目。修改Index.cshtml

@page "/"
@page "/{Id}"

<h1>Id = @Id</h1>

<p><a href="/">Without Id</a></p>
<p><a href="/15">With Id = 15</a></p>

@functions {
    [Parameter]
    public string Id { get; set; }
}

运行应用程序。

当我点击With Id = 15链接时，一切都像预期的那样工作- url已经改变，参数{Id}被赋值为Id，一切正常。

但是当我在那之后点击Without Id链接时，url已经改变了，但我的Id保持不变-等于15。

为什么我的价值观没有改变？这里我漏掉了什么？我该如何解决这个问题呢？

Answer 1

这种行为是有意为之的。请注意，更改的url并不意味着当前页面已更改。以下JavaScript函数执行更改url的内部导航：

function performInternalNavigation(absoluteInternalHref: string) {
  history.pushState(null, /* ignored title */ '', absoluteInternalHref);
  handleInternalNavigation();
} 

来源：https://github.com/aspnet/AspNetCore/blob/93127b39e824181d4f9b1a62b6fc8d10c481e2c8/src/Components/src/Microsoft.AspNetCore.Components.Browser.JS/src/Services/UriHelper.ts

调用history.pushState会导致地址栏显示".../15"，但不会导致浏览器加载新的url，更确切地说，不会导致Blazor重新创建索引组件。如果只更改URL参数，Blazor不会重新创建组件。因为您已经在Index页面上，所以单击链接"Without Id“不会导致Index组件重新呈现。相反，将重用当前组件实例，但遗憾的是，此实例组件的参数属性设置为15，并且它不会被AssignToProperties方法覆盖，该方法“遍历ParameterCollection，将每个参数分配给目标上具有相同名称的属性”。但是ParameterCollection不包含Id参数；回想一下，这是在您点击"Without Id“之后发生的。最终结果同样是包含值15的参数属性Id。来源：https://github.com/aspnet/Blazor/blob/29f925852b0a5e81e82780e0c1c32b486f7c3be6/src/Microsoft.AspNetCore.Blazor/Components/ParameterCollectionExtensions.cs

解决此问题的解决方法：

1. 覆盖SetParameters方法，如下所示：

public override void SetParameters(ParameterCollection parameters)
{
   if (string.IsNullOrEmpty(parameters.GetValueOrDefault<string>("Id")))
   {
      Id = null;
   }
   base.SetParameters(parameters);
}

路由器通过对

划分子类来实现自定义路由逻辑

希望这能帮到你。

Answer 2

as of ASP.NET Core 5.0支持可选的路由参数。

例如：

@page "/RouteParameter/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

Answer 3

简单的解决方法是删除第一个路由。它允许路由器忽略您的(缺少的)参数。然后使用?将Id设为可选：

@page "/" -- remove this line
@page "/{Id?}"

现在总是会有一些东西被赋值给Id，当它不在那里时，它就是空的。