Blazor 中的历史感知导航答案

【问题标题】：History-aware navigation in BlazorBlazor 中的历史感知导航
【发布时间】：2022-11-10 01:45:14
【问题描述】：

我现在正在做 Blazor，我想重新实现我在 react 日子里喜欢做的一个特技：显示二一次翻页，当前一页在中间，前一页留给它。当用户导航时，当前的向左移动，新的出现在中间：

这种方法很酷的一点是，您可以同时为移动设备和桌面设备进行设计：移动版本只是不显示前一页。

您甚至可以单击上一页中的链接，当前链接会被替换。（让我们将此功能称为“上一页点击”，而没有该功能的版本称为“基本版本”。）

现在到 Blazor。

我一直在 Blazor 的 JS 和 C# 源代码中四处寻找，没有办法挂钩历史更改的通知。我可以跟踪来自浏览器按钮的那些，但不能跟踪 Blazor 在链接点击时所做的那些，更不用说拦截它们了。

我认为“基本版本”可以完成，只要我能在 C# 方面得到一个简单的数字，告诉我我在堆栈的哪个级别。但我不知道如何在不听popstate（浏览器按钮）的情况下获取该信息和Blazor 自己的pushState 调用。

“上一页点击”更加困难，因为它需要我知道链接是从哪个“页面”（即组件）单击的，并且如果它是“前一个。

目前，在我看来，我必须更换 Blazor 的整个导航管理才能以某种方式使其工作，但我想在尝试之前先在这里问一下。

我的应用程序在 Blazor Server 和 Blazor Hybrid 中运行。

【问题讨论】：

【解决方案1】：

您可以尝试在导航触发时使用 NavigationManager.LocationChanged 事件处理程序来连接事件。

我过去构建了堆栈容器以允许后退按钮（在 UI 中），但不能完全与浏览器后退按钮一起使用。

我会尝试将来自 js 的拦截与层叠到所有组件的堆栈容器连接起来。因此，当从 js 触发后退按钮时，容器会监听该事件并相应地弹出/推送堆栈

【讨论】：