Javascript Blazor-路由后保留渲染

我有一个

Blazor

（

webassembly

）页面，页面上有一个地图（

传单

），上面有很多物品。当用户移动到另一个页面，然后返回地图页面（不重新加载路由）时，地图

div

元素被清除，我必须用项目再次填充地图。是否有可能以某种方式将这些项目保留在地图（内存）上，以便在用户返回

地图页面时不需要重新绘制

当前情景：

用户进入地图页面
通过javascript调用OnAfterRenderAsync

方法加载到地图上的项目太多了

用户转到另一个页面

用户返回到MapPage

MapPage组件现在已清除，应再次渲染

页面将再次呈现，因此地图上再次加载了许多项目（步骤2）

我想要的是：

用户进入地图页面

通过javascript在AfterRenderAsync方法中调用加载到地图上的项目太多了

用户转到另一个页面

用户返回到MapPage

MapPage将从内存和步骤2的所有内容中加载

以下是我的地图页代码：

  protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await js.InvokeVoidAsync("showMapItems");
        await base.OnAfterRenderAsync(firstRender);
    }

更新（奖励）： 假设页面正在加载位置并在地图上显示它们。如果用户单击每个位置，他应该被重定向到详细信息页面，他将返回搜索页面

黑客解决方案：我决定通过设置地图的

display:none

来隐藏地图，并显示细节组件。但我希望详细信息也可以通过URL访问，当用户单击地图上的详细信息时，URL应该更改。因此，我使用了以下路径，但在加载页面时出错：

@page "/location/search"
@page "/location/search#{LocationId:int}"

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

我在浏览器中遇到以下错误：

无效的模板“位置/搜索#{*LocationId}”。中缺少“{” 参数段“search{*LocationId}”

---

我不知道blazor，但也许你可以访问@FalkeDesign谢谢你的评论，但事实并非如此。如果地图是布局的一部分，该怎么办？根据实际页面，地图是否可见。因此，第一次加载地图页面时，你运行代码并通过静态变量保存它。用户转到另一个页面，然后p不再可见。用户重新访问MapPage，因为静态变量为true，所以您不会调用脚本？@Justthebenno否路由后map div元素将被完全删除。此外，我无法在布局中使用地图。地图无法轻松保存为变量。请参阅传单文档有多种解决方案你可以使用：1-使用像“mainpage.html#newpage”这样的位置散列，你可以用ajax请求加载你的详细信息页面，并在隐藏地图后将其打印到页面上，现在可以通过URL 2-使用js“window.history.pushState”3-（最简单的解决方案）使用“iframe”，并使用像解决方案编号（1）这样的散列方法访问详细信息4-使用任何“客户端存储”API（如本地存储API、indexeddb API、Web存储API）来存储地图资源，如果您需要更多详细信息，我可以发布完整详细的答案