Blazor-Navigating 组件

介绍

Blazor 中的 Navigating 组件是路由系统的一部分,主要用于在页面导航发生但尚未完成时向用户提供视觉反馈(如加载提示)。它封装在 Router 组件内部,是增强用户体验的关键工具。
Navigating组件,其功能是当 Blazor 应用程序在切换页面时的中间等待界面,可能由于网络缓慢,或其他原因导致。

核心用途

显示导航状态

当用户触发页面跳转(点击链接、代码调用 NavigationManager.NavigateTo)时,若目标页面需要异步加载(如下载程序集、初始化数据),Navigating 组件会立即显示预设内容(如加载动画),避免界面“卡顿”的错觉。

提升用户体验

在导航延迟期间(如网络请求慢),通过提示告知用户操作正在处理,减少重复点击或误操作。

使用场景

1. 异步加载页面

场景:首次访问某个页面时,需从服务器下载 .dll 程序集。
解决方案:Navigating 显示加载动画,直到程序集下载完成。

2. 数据初始化耗时

场景:目标页面的 OnInitializedAsync() 方法需调用 API 获取数据。
解决方案:导航期间显示占位内容,避免空白页面。

实例实现

在App.razor中设置跳转等待过程中的界面,我们做一个延时的界面看看实际的效果
在 Blazor Web App 任何呈现模式的每页/组件交互位置的项目中,Navigating 组件是无效的。

<Router AppAssembly="@typeof(App).Assembly">
  <Found Context="routeData">
    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    <FocusOnNavigate RouteData=
这个日志片段表明你正在使用 Playwright 或类似的自动化测试工具访问一个登录页面(`http://119.27.182.181:9050/#/login`),并等待页面加载完成(`waiting until "load"`)。以下是可能的问题和解决方案: --- ### **可能的问题** 1. **页面加载超时**: - 如果网络较慢或服务器响应延迟,等待 `"load"` 事件可能会超时。 2. **URL 不可访问**: - 目标地址(`119.27.182.181:9050`)可能无法连接(防火墙、端口未开放或服务未启动)。 3. **Playwright 配置问题**: - 未正确设置导航超时时间或未处理页面加载失败的情况。 --- ### **解决方案** #### **1. 检查网络和 URL 可访问性** - 在浏览器中直接访问该 URL,确认页面能正常加载。 - 使用 `curl` 或 `ping` 测试连通性: ```bash curl -v http://119.27.182.181:9050/#/login ``` #### **2. 增加 Playwright 的导航超时时间** 默认超时时间可能较短(如 30 秒),可通过以下方式延长: ```python from playwright.sync_api import sync_playwright with sync_playwright() as p: browser = p.chromium.launch() page = browser.new_page() # 设置导航超时为 2 分钟 page.set_default_navigation_timeout(120000) # 单位:毫秒 page.goto("http://119.27.182.181:9050/#/login", wait_until="load") ``` #### **3. 改用更灵活的等待策略** 如果 `"load"` 事件不可靠,可以改用 `"domcontentloaded"` 或结合显式等待: ```python # 等待 DOM 加载完成(不等待图片等资源) page.goto("http://119.27.182.181:9050/#/login", wait_until="domcontentloaded") # 或显式等待某个元素出现 page.goto("http://119.27.182.181:9050/#/login") page.wait_for_selector("#login-form") # 等待登录表单出现 ``` #### **4. 捕获导航异常** 处理可能的网络错误或超时: ```python try: page.goto("http://119.27.182.181:9050/#/login", wait_until="load", timeout=60000) except Exception as e: print(f"导航失败: {e}") # 可选:重试或截图调试 page.screenshot(path="error.png") ``` #### **5. 检查目标页面的实现** - 如果页面是单页应用(SPA),`"load"` 事件可能触发过早。改用 `"networkidle"` 等待网络请求平静: ```python page.goto("http://119.27.182.181:9050/#/login", wait_until="networkidle") ``` --- ### **调试建议** 1. **启用日志**: ```python import logging logging.basicConfig(level=logging.DEBUG) ``` 2. **截图或保存页面**: ```python page.screenshot(path="debug.png") with open("page_source.html", "w", encoding="utf-8") as f: f.write(page.content()) ``` --- ### **常见问题扩展** 1. Playwright 中 `wait_until` 的其他可选值有哪些? 2. 如何处理 HTTPS 证书错误? 3. 单页应用(SPA)的最佳等待策略是什么? 4. 如何模拟慢速网络以测试页面加载? 5. 目标页面需要登录时如何处理会话保持?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

code-Study

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值