Blazor Server：如何解决JS修改面包屑后跨页面持久化问题

方案一：通过级联参数实现页面自定义面包屑（推荐，符合Blazor组件模型） #

放弃直接操作DOM的JS方式，改用Blazor原生组件通信机制，让布局支持接收页面传递的自定义面包屑内容：

1. 修改AppLayout.razor，添加级联参数和条件渲染逻辑：

<CascadingValue Name="CustomBreadcrumb" Value="CustomBreadcrumbContent">
    @Body
</CascadingValue>

<ul id="breadcrumbs" class="breadcrumbs">
    @if (CustomBreadcrumbContent != null)
    {
        @CustomBreadcrumbContent
    }
    else
    {
        <li><a href="#">Home</a></li>
        @if (CurrentModuleState != null)
        {
            <li>@CurrentModuleState.Descriptor.Name</li>
        }
    }
</ul>

@code {
    [CascadingParameter(Name = "CustomBreadcrumb")]
    private RenderFragment CustomBreadcrumbContent { get; set; }
}

2. 在需要自定义面包屑的页面（如SpecialPage.razor）中，通过级联参数传递自定义内容：

@page "/special-page"
@attribute [CascadingParameter(Name = "CustomBreadcrumb")] RenderFragment CustomBreadcrumbContent { set; }

@{
    CustomBreadcrumbContent = @<text>
        <li><a href="#">Home</a></li>
        <li><a href="/modules">Modules</a></li>
        <li>Special Page</li>
    </text>;
}

<!-- 页面主体内容 -->

这种方式完全基于Blazor渲染机制，导航到其他页面时，级联参数会自动重置，布局会自动渲染默认面包屑，不会出现DOM状态残留问题。

方案二：监听导航事件，页面切换时重置面包屑 #

如果必须保留JS修改DOM的方式，可通过监听导航事件，在页面切换时强制恢复默认面包屑：

1. 修改AppLayout.razor，注入NavigationManager并监听位置变化事件：

@inject NavigationManager NavManager
<ul id="breadcrumbs" class="breadcrumbs">
    <li><a href="#">Home</a></li>
    @if (CurrentModuleState != null)
    {
        <li>@CurrentModuleState.Descriptor.Name</li>
    }
</ul>

@code {
    protected override void OnInitialized()
    {
        NavManager.LocationChanged += OnLocationChanged;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // 强制组件重新渲染，让Blazor重新生成默认面包屑DOM
        StateHasChanged();
    }

    public void Dispose()
    {
        NavManager.LocationChanged -= OnLocationChanged;
    }
}

2. 可选：添加JS重置方法，在导航时主动替换DOM内容（需确保默认HTML与布局逻辑一致）：

window.resetBreadcrumb = function(defaultHtml) {
    var breadcrumbElement = document.getElementById("breadcrumbs");
    if (breadcrumbElement) {
        breadcrumbElement.innerHTML = defaultHtml;
    }
}

在布局的OnLocationChanged方法中调用：

@inject IJSRuntime JSRuntime

// ... 其他代码

private async Task OnLocationChanged(object sender, LocationChangedEventArgs e)
{
    var defaultHtml = @"<li><a href=""#"">Home</a></li>" 
        + (CurrentModuleState != null ? $"<li>{CurrentModuleState.Descriptor.Name}</li>" : "");
    await JSRuntime.InvokeVoidAsync("resetBreadcrumb", defaultHtml);
}

方案三：在特定页面销毁时重置面包屑 #

在需要自定义面包屑的页面组件中实现IDisposable，当页面销毁时调用JS重置面包屑：

@page "/special-page"
@inject IJSRuntime JSRuntime
@implements IDisposable

<!-- 页面主体内容 -->

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 设置自定义面包屑
            var customHtml = @"<li><a href=""#"">Home</a></li><li>Custom Page</li>";
            await JSRuntime.InvokeVoidAsync("updateBreadcrumb", customHtml);
        }
    }

    public void Dispose()
    {
        // 页面销毁时重置面包屑
        var defaultHtml = @"<li><a href=""#"">Home</a></li>" 
            + (CurrentModuleState != null ? $"<li>{CurrentModuleState.Descriptor.Name}</li>" : "");
        _ = JSRuntime.InvokeVoidAsync("resetBreadcrumb", defaultHtml);
    }
}

内容的提问来源于stack exchange，提问作者Akbar Ergashev