时间戳

首页 > 解决方案 > Blazor - 路由后保持渲染

javascript - Blazor - 路由后保持渲染

问题描述

我有一个Blazor( web-assembly) 页面，其中有一个 map( Leaflet) ，上面有大量加载的项目。当用户移动到另一个页面然后返回到地图页面（路由未重新加载）时，地图div元素被清除，我必须再次用项目填充地图。是否有可能以某种方式将这些项目保留在地图（内存）上，因此当用户返回时不需要重绘MapPage？

当前情景：

  1. 用户转到MapPage
  2. OnAfterRenderAsync通过javascript调用方法在地图上加载了这么多项目
  3. 用户转到另一个页面
  4. 用户返回MapPage
  5. MapPage 组件cleared现在应该重新渲染
  6. 页面将再次呈现 地图上再次加载了如此多的项目（第 2 步）

我想要的是 ：

  1. 用户转到MapPage
  2. 如此多的项目通过OnAfterRenderAsync方法中的 javascript 调用加载到地图上
  3. 用户转到另一个页面
  4. 用户返回MapPage
  5. MapPage将从内存和步骤 2 中的所有内容加载

这是我的 MapPage 代码：

  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}”中缺少“{”。

标签： javascriptleafletblazorblazor-webassembly

解决方案

推荐阅读