Blazor中如何导航至页面而不创建新实例

Blazor Server 默认会在每次导航时创建目标页面组件的新实例，这是框架的设计逻辑——保证每个导航会话的组件状态隔离。NavigateTo()的ForceLoad参数只会强制刷新整个页面，反而会加重实例重建的问题，不是正确的解决方向。以下是几种可行的解决方案：

方案1：使用 <KeepAlive> 内置缓存组件 #

Blazor 提供了<KeepAlive>组件来保留组件实例，下次导航回该路由时复用已创建的实例。

全局缓存所有路由组件 #

修改App.razor中的路由配置，用<KeepAlive>包裹<RouteView>：

<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <KeepAlive>
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </KeepAlive>
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

缓存特定组件 #

如果只需要缓存部分页面，可在<KeepAlive>中使用Include参数指定组件类型：

<KeepAlive Include="typeof(MyCachedPage)">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</KeepAlive>

也可在组件自身结合<KeepAlive>，并利用生命周期方法处理状态：

@page "/my-cached-page"
@implements IComponentLifecycle

<KeepAlive>
    <p>缓存页面内容：@Counter</p>
    <button @onclick="() => Counter++">点击计数</button>
</KeepAlive>

@code {
    private int Counter { get; set; }

    public Task OnActivateAsync()
    {
        // 页面被激活（复用实例）时执行逻辑
        return Task.CompletedTask;
    }

    public Task OnDeactivateAsync()
    {
        // 页面被失活（离开）时执行逻辑
        return Task.CompletedTask;
    }
}

<KeepAlive>会完整保留组件的状态（包括变量、绑定数据），适合需要保留用户操作上下文的场景。

方案2：使用状态容器保存页面状态（不复用实例，但保留数据） #

如果不需要复用组件实例，仅希望页面重新加载时恢复之前的状态，可通过状态容器服务实现：

1. 创建状态容器类 #

public class PageStateContainer
{
    // 存储目标页面的状态数据
    public Dictionary<string, object> TargetPageState { get; set; } = new();

    // 状态变化通知事件
    public event Action OnStateChanged;

    public void UpdateState(string key, object value)
    {
        TargetPageState[key] = value;
        OnStateChanged?.Invoke();
    }
}

2. 注册为单例服务 #

在Program.cs中添加：

builder.Services.AddSingleton<PageStateContainer>();

3. 在页面中使用状态容器 #

@page "/target-page"
@inject PageStateContainer StateContainer

<p>保存的输入值：@InputText</p>
<input @bind="InputText" placeholder="输入内容" />

@code {
    private string InputText { get; set; }

    protected override void OnInitialized()
    {
        // 初始化时读取之前保存的状态
        if (StateContainer.TargetPageState.TryGetValue("InputText", out var value))
        {
            InputText = value.ToString();
        }
        StateContainer.OnStateChanged += StateChanged;
    }

    private void StateChanged() => StateHasChanged();

    public void Dispose() => StateContainer.OnStateChanged -= StateChanged;

    protected override void OnDisposing()
    {
        // 页面销毁前保存状态到容器
        StateContainer.UpdateState("InputText", InputText);
    }
}

这种方式不复用组件实例，但能保留核心业务数据，适合不需要保留组件内部复杂状态的场景。

方案3：手动管理组件实例（自定义导航逻辑） #

如果需要完全控制组件实例的创建和复用，可以绕过Blazor的路由系统，通过父组件维护实例并控制显示：

@inject NavigationManager NavManager

<!-- 自定义导航按钮 -->
<button @onclick="() => SwitchPage("/page-a")">页面A</button>
<button @onclick="() => SwitchPage("/page-b")">页面B</button>

<!-- 显示当前激活的组件 -->
@if (_currentComponent != null)
{
    @_currentComponent
}

@code {
    private RenderFragment _currentComponent;
    private readonly Dictionary<string, RenderFragment> _componentCache = new()
    {
        { "/page-a", builder => builder.AddComponent<PageA>(0) },
        { "/page-b", builder => builder.AddComponent<PageB>(1) }
    };

    private void SwitchPage(string path)
    {
        // 同步浏览器URL
        NavManager.NavigateTo(path, forceLoad: false);
        // 切换到缓存的组件实例
        _currentComponent = _componentCache[path];
        StateHasChanged();
    }
}

这种方式完全由你控制组件实例的生命周期，但需要手动处理路由同步、导航逻辑，适合复杂的定制场景。

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