blazor - 是否有一些方法可以在不使用 Blazor 中的地址栏的情况下导航到页面并传递参数？

Question

这存在于许多现代 SPA 库/框架中......

我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue)，您可以执行类似...

this.props.router.push({
  pathname: '/login-successfully',
  state: {
    userId: 'john',
    name: 'John Doe
  }
})

然后在“其他页面”的初始化中，您将拥有:

const {state} = useLocation();
const { userId, name } = state; 

你可以渲染类似的东西

<p>Welcome Back, {name}!</p>

这样的特性在很多场景下都非常有用，但是通过阅读 Blazor 中的路由文档在 https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0我找不到任何东西。 NavigationManager 只有这些参数:

public void NavigateTo (string uri, bool forceLoad = false);

是否有一些我可以使用的等效方法？我知道一个解决方法是创建一个单例类，将数据存储在那里并显示在登录成功页面上，但我真的希望找到更好的解决方案。

Answer 1

好吧，我的第一个回答让我很失望，因为在 URL 中传递数据的几十年前的标准显然是“垃圾”(实际引用)所以让我解释一下我在这种情况下实际做了什么。我实际上也不热衷于在查询字符串中传递数据，尤其是因为在 Blazor 中您很少需要这样做。

当我说我不会在共享大量数据的页面之间导航时，我并不是在开玩笑。我认为每个页面都是一个单独的站点，有自己的信息加载和保存到数据库。除非我传递的是非常简单的东西，例如 URL 中的 ID，否则我会使用组件来切换子功能。

(未经测试的代码，但您可以理解)

主页:ma​​in.razor

@if (IsDoingSomethingWithData)
{
     <MyDoingSomethingWithDataComponent ID=variable_ID Name=variable_Name State=variableState />
}
else
{
     <input @bind=variable_state /><br />
     <input @bind=variable_ID /><br />
     <input @bind=variable_name /><br />
     <button @onclick="ToggleDoingSomething">Next</button>
}

@code {
     string variable_state;
     string variable_ID;
     string variable_name;
     bool IsDoingSomethingWithData;
     void ToggleDoingSomething(){
          IsDoingSomethingWithData = !IsDoingSomethingWithData;
     }
}

组件:MyDoingSomethingWithDataComponent

(即您本来可以导航到的内容，但在 Blazor 中不需要)

<div>Hello, @variable_name</div>
<div>Your ID is: @variable_ID</div>
<div>I understand that you live in state: @variable_state</div>

@code{
[Parameter]
string ID;

[Parameter]
string Name;

[Parameter]
string State;
}

如果你真的做了一个项目并这样做——使用命名参数来初始化一个组件——你会发现它永远不会被命中，并且在检查页面时，没有任何组件被渲染，直到你设置 IsDoingSomethingWithData = true;

魔法!