Blazor页面按F5刷新跳转主菜单而非当前页的解决方法

方案一：确保页面继承布局并保留菜单状态 #

1. 全局指定默认布局
   在_Imports.razor中添加全局布局引用，让所有页面自动继承目标布局，无需逐个页面设置：

@layout MainLayout  <!-- 替换为你的布局组件名称 -->

这样刷新时布局（包括左侧Navigation组件）会重新渲染，若菜单有展开、选中这类状态，可通过持久化处理让用户无感知：

2. 持久化菜单状态
   在Navigation组件中，将菜单状态保存到浏览器localStorage，初始化时读取恢复：

@inject IJSRuntime JSRuntime

@code {
    private string? _activeMenuItem;
    private Dictionary<string, bool> _expandedMenus = new();

    protected override async Task OnInitializedAsync()
    {
        // 读取本地存储的状态
        _activeMenuItem = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "activeMenuItem");
        var savedExpanded = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "expandedMenus");
        if (!string.IsNullOrEmpty(savedExpanded))
        {
            _expandedMenus = JsonSerializer.Deserialize<Dictionary<string, bool>>(savedExpanded)!;
        }
    }

    // 选中菜单时保存状态
    private async Task OnMenuItemSelected(string menuItemId)
    {
        _activeMenuItem = menuItemId;
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "activeMenuItem", menuItemId);
    }

    // 菜单展开/折叠时保存状态
    private async Task OnMenuExpanded(string menuId, bool expanded)
    {
        _expandedMenus[menuId] = expanded;
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "expandedMenus", 
            JsonSerializer.Serialize(_expandedMenus));
    }
}

方案二：阻止F5刷新操作（最坏情况） #

若需直接阻止键盘触发的刷新，可通过JavaScript监听事件：
在布局组件或_Host.cshtml中添加脚本：

<script>
    document.addEventListener('keydown', function(e) {
        // 阻止F5刷新
        if (e.key === 'F5') {
            e.preventDefault();
            alert('当前页面不支持刷新操作，请使用菜单切换页面');
        }
        // 阻止Ctrl+R/Command+R刷新
        if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
            e.preventDefault();
            alert('当前页面不支持刷新操作，请使用菜单切换页面');
        }
    });
</script>

注：此方式仅阻止键盘触发的刷新，无法拦截浏览器刷新按钮或右键刷新操作。

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