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链接时，一切都按预期工作 - 网址已更改，参数{Id}被赋值为Id，一切都很好。

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

为什么我的价值没有改变？我在这里错过了什么？我怎样才能解决这个问题？

Answer 1

此行为是设计使然。请注意，更改的网址并不意味着当前页面已更改。以下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会导致URL栏显示“... / 15”，但不会导致浏览器加载新的URL，或者更确切地说Blazor会重新创建Index组件。如果只有URL参数发生更改，Blazor不会重新创建组件。由于您已经在索引页面上，因此单击“无ID”链接不会导致索引组件重新呈现。相反，重用当前的Component实例，但是这个实例组件的参数属性设置为值15，并且它不会被AssignToProperties方法覆盖，该方法“迭代ParameterCollection，将每个参数分配给同名的属性”估计的正好。”但是ParameterCollection不包含Id参数;回想一下，在你点击“没有ID”后会发生这种情况。最终结果是，参数属性Id包含值15.源：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);
   }

2. 通过子类化Router实现自定义路由逻辑

希望这可以帮助...