命名为 MyComponents ，项目模板的交互类型选 Auto

主要用于服务器端渲染（SSR）
被放置在服务器端项目中
适用于不需要实时交互或复杂用户交互的场景
客户端组件 (Auto/WebAssembly):

组件位于客户端项目内
使用 WebAssembly 技术进行编译，能够直接与浏览器交互
适合需要交互性和实时更新的应用场景
使用 SignalR 可以实现实时通信，从而增强组件的功能性
<!-- 选择 Auto 或 WebAssembly ，否则无法交互 -->
@rendermode InteractiveAuto

<h3>Demo</h3>

<!-- 文本不为空时才显示标签 -->
@if (textInfo is not null)
{

<h4>Info: @textInfo</h4>

}

<!-- 按钮样式参考 Counter 组件 -->
<button class="btn btn-primary" @onclick="UpdateText">Update Text</button>
<!-- 委托方式调用方法，可以传入参数 -->
<button class="btn btn-primary" @onclick="(()=>{UpdateNumber(10);})">Update Number</button>

@code {

private string? textInfo = null;

private void UpdateText()
{
    textInfo = "This is the new information";
}

private void UpdateNumber(int i = 0)
{
    textInfo = $"This is number {i}";
}

}

@组件可以同时有多个路由@
@page "/page"
@page "/pages/start"

@可以使用组件名作路由@
@attribute [Route(nameof(Start))]

@页面跳转必须指定交互性，并注入导航管理器@
@rendermode InteractiveAuto
@inject NavigationManager Navigation

<h3>Start</h3>

@通过NavigationManager.NavigateTo方法跳转到Counter组件@
<button class="btn btn-primary" onclick="@(()=>Navigation.NavigateTo(nameof(Counter)))">Go to Counter</button>

@执行完整的页面重新加载@
<button class="btn btn-primary" onclick="@(()=>Navigation.Refresh(true))">Refresh</button>
@code {
https://www.laipuhuo.com/goodsDetail/03f31f4a83d54a90b1d8e909...
https://www.laipuhuo.com/goodsDetail/0414fd36acd34d8ea4fed73c...
https://www.laipuhuo.com/goodsDetail/0448b35299a542479f80940c...
https://www.laipuhuo.com/goodsDetail/045eb046d2f645a7be4875fc...
}