当前位置： 首页 > news >正文

Blazor_WASM之4：路由

news 2026/3/30 18:41:55

Blazor_WASM之4：路由

路由模板

通过 Router组件可在 Blazor 应用中路由到 Razor 组件。 Router 组件在 Blazor 应用的 App 组件中使用。App组件模板如下

<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /></Found><NotFound><p>Sorry, there's nothing at this address.</p></NotFound>
</Router>

在运行时，RouteView组件有两个作用：

  • 从 Router 接收 RouteData（例如/test）以及所有路由参数。
  • 使用指定的组件的布局来呈现该组件，包括任何后续嵌套布局。

组件支持使用多个 @page 指令，/blazor-route和/different-blazor-route都能跳转到该界面

@page "/blazor-route"
@page "/different-blazor-route"<h1>Blazor routing</h1>

也可以将@page替换成@attribute

@page "/test"
@attribute [Route("test")]

重要：想要正确解析URL，必须在<head>中包含<base>，也就是在wwwroot中的index.html中<head>中包含<base>。

<head>...<base href="/" />...
</head>

元素聚焦

切换到指定页面后，可以将UI焦点设置到指定元素。

<FocusOnNavigate RouteData="@routeData" Selector="h1" />

当 Router 组件导航到新页面时，FocusOnNavigate组件将焦点设置到页面的顶层标题 (<h1>)。

NotFound

如果找不到所请求路由的内容，则 Router组件允许应用指定自定义内容

<NotFound><h1>Sorry</h1><p>Sorry, there's nothing at this address.</p>
</NotFound>

路由参数

路由器使用相同的路由参数名称来填充组件参数，且路由参数不区分大小写。

@page "/test/{name}"<h3>Test</h3><p>传入的参数是：@Name</p>@code {[Parameter]public string? Name{ set;get; }
}

在地址栏中填写/test/哈哈哈

image-20230308102203841

但是，如果地址栏只写/test，也就是不写参数，则会出现

image-20230308102326706

改写为@page "/test/{name?}"，name则变成可选参数，地址栏仍然只写/test，则会出现

image-20230308102507905

路由约束

路由约束强制在路由段和组件之间进行类型匹配，例如只允许id为int类型

@page "/user/{Id:int}"<h1>User Id: @Id</h1>@code {[Parameter]public int Id { get; set; }
}

路由约束类型

image-20230308103322593

路由约束也可以使用可选参数，比如下面的Id是必须，option是可选

@page "/user/{Id:int}/{Option:bool?}"

CatchAll路由参数

如果想把/test/a/b/c中/test/后面的内容全部当做参数，则可以使用/test/{*par}来进行提取。

@page "/catch-all/{*pageRoute}"@code {[Parameter]public string? PageRoute { get; set; }
}

查询字符串

查询字符串的样式如/test?name=tom&age=18，？后面的内容就是查询字符串，查询字符串支持的类型有bool, DateTime, decimal, double, float, Guid, int, long, string。使用方法如下：

@page "/test"<h3>Test</h3><p>姓名：@Name</p>
<p>年龄：@Age</p>
<p>性别：@(MyProperty)</p>@code {[Parameter][SupplyParameterFromQuery]public string? Name{ set;get; }[Parameter][SupplyParameterFromQuery]public int? Age { set; get; }[Parameter][SupplyParameterFromQuery]public bool Gender { set; get; }public string MyProperty{get { return Gender?"男":"女"; }}   
}

在地址栏输入.../test?name=Tom&age=18&gender=true

image-20230308114308555

SupplyParameterFromQuery的Name属性可以指定查询参数的名字，下面是一个将查询参数放到同一个数组的案例：

@page "/test"<h3>Test</h3>
@foreach (var item in stars)
{<p>@item</p>
}@code {[Parameter][SupplyParameterFromQuery(Name ="star")]public string[]? stars { set; get; }}

在地址栏输入.../test?star=a&star=b&star=c

image-20230308115557316

相关文章：

Blazor_WASM之4：路由

Blazor_WASM之4&#xff1a;路由 路由模板 通过 Router组件可在 Blazor 应用中路由到 Razor 组件。 Router 组件在 Blazor 应用的 App 组件中使用。App组件模板如下 <Router AppAssembly"typeof(Program).Assembly"><Found Context"routeData"…...

编程日记 2023/4/24 6:43:33

对Vue响应式的理解

1. 啥是响应式? &#xff08;1&#xff09;.所谓的数据响应式就是能够使数据变化可以被检测到并且对这种变化做出响应式的机制 2. 为什么vue需要响应式? &#xff08;1&#xff09;.MVVM框架中要解决的核心问题数据驱动视图&#xff0c;数据的改变引起视图的更新&#xff…...

编程日记 2023/4/24 6:43:29

磁盘阵列Raid探讨

最近公司买服务器&#xff0c;顺便了解一下服务器配置方面的问题 以下讨论的都是入门级服务器配置&#xff0c;全部是主观意见&#xff0c;没有任何科学依据&#xff0c;欢迎大家讨论 Raid0&#xff0c;Raid1&#xff0c;Raid10&#xff0c;Raid5&#xff0c;Raid6(Raid5热备)…...

编程日记 2023/4/24 6:43:25

基于MyBatis依次、批量、分页增删改查

我们知道处理数据有三种思路&#xff1a;依次、批量、分页&#xff0c;对应方法如下 依次处理&#xff1a;在 Java 里面写 for 循环&#xff0c;依次使用 SQL 语句&#xff0c;频繁连接断开数据库批量处理&#xff1a;在 MyBatis 里面用 <foreach> 拼接成一条长 SQL 语句…...

编程日记 2023/4/24 6:43:19

Tomcat源码分析-Session源码解析

tomcat session 设计分析 tomcat session 组件图如下所示&#xff0c;其中 Context 对应一个 webapp 应用&#xff0c;每个 webapp 有多个 HttpSessionListener&#xff0c; 并且每个应用的 session 是独立管理的&#xff0c;而 session 的创建、销毁由 Manager 组件完成&…...

编程日记 2023/4/24 6:43:14

常见数据模型

目录 1.1两类数据模型 1.2概念模型 1.3数据模型的组成要素 1.4常见数据模型 层次模型 网状模型 关系模型 数据模型是对现实世界数据特征的抽象&#xff0c;也就是说数据模型是用来描述数据、组织数据和对数据进行操作的。数据模型是数据库系统的核心和基础。 1.1两类数…...

编程日记 2023/4/24 6:43:07

Lesson 8.3 ID3、C4.5 决策树的建模流程 Lesson 8.4 CART 回归树的建模流程与 sklearn 参数详解

文章目录一、ID3 决策树的基本建模流程二、C4.5 决策树的基本建模流程1. 信息值&#xff08;information value&#xff09;2. C4.5 的连续变量处理方法三、CART 回归树的基本建模流程1. 数据准备2. 生成备选规则3. 挑选规则4. 进行多轮迭代5. 回归树的预测过程四、CART 回归树…...

编程日记 2023/4/24 6:43:04

阿里云手机短信登录

阿里云短信服务介绍阿里云短信服务&#xff08;Short Message Service&#xff09;是广大企业客户快速触达手机用户所优选使用的通信能力。调用API或用群发助手&#xff0c;即可发送验证码、通知类和营销类短信&#xff1b;国内验证短信秒级触达&#xff0c;到达率最高可达99%&…...

编程日记 2023/4/24 6:42:58

Android Camera SDK NDK NDK_vendor介绍

Android Camera JNI NDK NDK_vendor介绍前言主要有哪几种interface&#xff1f;Android SDKCamera API 1Camera API 2小结Android NDKNDK InterfaceNDK Vendor Interface小结Camera VTS Testcase总结Reference前言 本篇博客是想介绍Android camera从application layer到camera…...

编程日记 2023/4/24 6:42:52

SQL基础语句小结

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; 目录 一、SQL概述 1.简介 2.格式语法 3.SQL分类 二、DDL操作数据库 1.创建数据库 2.查询与使用 3.删除数据库 三、DDL:操作表 (1)数据类型 (2)创建表 (3)查询当前数据库的表 (4)删除表 (5)修改表 四、DML…...

编程日记 2023/4/24 6:42:46

管理类书籍推荐

管理类书籍对于每一位想要获得管理能力提升或者实现职业生涯更上一层楼的企业管理者或领导者而言&#xff0c;都是不可或缺的一项重要学习工具。作为管理工作从事者的职场必需品&#xff0c;一本出色的管理类书籍可以为我们提供大量宝贵的经验与专业建议&#xff0c;从而让管理…...

编程日记 2023/4/24 6:42:38

win10 mingw 调用python

ubuntu调用pythonhttps://blog.csdn.net/qq_39942341/article/details/129333969 我这里mingw是用msys2的 opencv也是msys2装的 安装msys2和opencv可以参考这个https://blog.csdn.net/qq_39942341/article/details/129380197?spm1001.2014.3001.5502 环境变量里加入python路…...

编程日记 2023/4/24 6:42:34

教你使用三种方式写一个最基本的spark程序

当需要处理大规模数据并且需要进行复杂的数据处理时&#xff0c;通常会使用Hadoop生态系统中的Hive和Spark来完成任务。在下面的例子中&#xff0c;我将说明如何使用Spark编写一个程序来处理Hive中的数据&#xff0c;以满足某个特定需求。假设我们有一个Hive表&#xff0c;其中…...

编程日记 2023/4/24 6:42:30

软件设计师错题集

软件设计师错题集一、计算机组成与体系结构1.1 浮点数1.2 Flynn分类法1.3 指令流水线1.4 层次化存储体系1.4.1 程序的局限性1.5 Cache1.6 输入输出技术1.7 总线系统1.8 CRC循环冗余校验码二、数据结构与算法基础2.1 队列与栈2.2 树与二叉树的特殊性2.3 最优二叉树&#xff08;哈…...

编程日记 2023/4/24 6:42:25

【华为机试真题详解 Python实现】静态扫描最优成本【2023 Q1 | 100分】

文章目录前言题目描述输入描述输出描述示例 1输入&#xff1a;输出&#xff1a;示例 2输入&#xff1a;输出&#xff1a;题目解析参考代码前言 《华为机试真题详解》专栏含牛客网华为专栏、华为面经试题、华为OD机试真题。 如果您在准备华为的面试&#xff0c;期间有想了解的…...

编程日记 2023/4/24 6:42:22

算法刷题总结 (四) 动态规划

算法总结4 动态规划一、动态规划1.1、基础问题11.1.1、509. 斐波那契数列1.1.2、70. 爬楼梯1.1.3、746. 使用最小花费爬楼梯1.2、基础问题21.2.1、62. 不同路径1.2.2、63. 不同路径Ⅱ1.2.3、343. 整数拆分1.2.4、96. 不同的二叉搜索树1.3、背包问题1.3.1、01背包1.3.1.1、单次选…...

编程日记 2023/4/24 6:42:14

Grafana 转换数据的工具介绍

转换数据 Grafana 可以在数据显示到面板前对数据进行处理 1、点击Transform选项卡 2、选择要使用的转换类型&#xff0c;不同的转换类型配置不同 3、要新增转换类型&#xff0c;点击Add transformation 4、使用右上角调式按钮可以调式转换 支持的转换类型&#xff1a; Add f…...

编程日记 2023/4/24 6:42:08

Linux 学习笔记

一、 概述 1. 操作系统 ① 计算机由硬件和软件组成 ② 操作系统属于软件范畴&#xff0c;主要作用是协助用户调度硬件工作&#xff0c;充当用户和计算机硬件之间的桥梁 ③ 常见的操作系统 &#x1f920; PC端&#xff1a;Windows、Linux、MacOS&#x1f920; 移动端&#…...

编程日记 2023/4/24 6:42:01

HTML注入专精整理

目录 HTML注入介绍 抽象解释 HTML注入的影响 HTML注入与XSS的区别 HTML元素流程图...

编程日记 2023/4/24 6:41:57

看完这篇我不信你不会二叉树的层序遍历【C语言】

目录 实现思路 代码实现 之前介绍了二叉树的前、中、后序三种遍历&#xff0c;采用的是递归的方式。今天我们来学习另外一种遍历方式——层序遍历。层序遍历不容小觑&#xff0c;虽然实现方法并不难&#xff0c;但是它所采取的思路是很值得学习的&#xff0c;与前三者不同&am…...

编程日记 2023/4/24 6:41:55

Hive与MySQL集成配置全流程解析

1. Hive与MySQL集成的核心价值 在企业级大数据环境中&#xff0c;Hive作为数据仓库工具经常需要处理PB级数据。但默认的Derby元数据库存在单会话限制和性能瓶颈&#xff0c;这正是MySQL大显身手的地方。我经历过多次生产环境迁移&#xff0c;将元数据从Derby切换到MySQL后&…...

编程新知 2026/3/30 18:12:38

如何快速配置AdGuard广告拦截扩展：5分钟完成跨浏览器隐私保护的完整教程

如何快速配置AdGuard广告拦截扩展&#xff1a;5分钟完成跨浏览器隐私保护的完整教程 【免费下载链接】AdguardBrowserExtension AdGuard browser extension 项目地址: https://gitcode.com/gh_mirrors/ad/AdguardBrowserExtension AdGuard浏览器扩展是一款开源、高效的广…...

编程新知 2026/3/30 18:00:34

多角色语音合成解决方案：Chatterbox技术实现与应用指南

多角色语音合成解决方案&#xff1a;Chatterbox技术实现与应用指南 【免费下载链接】chatterbox Open source TTS model 项目地址: https://gitcode.com/GitHub_Trending/chatterbox7/chatterbox 在数字化内容创作与智能交互领域&#xff0c;语音合成技术正经历从单一语…...

编程新知 2026/3/30 17:22:02

3个步骤实现教育资源高效获取：电子教材下载工具全攻略

3个步骤实现教育资源高效获取&#xff1a;电子教材下载工具全攻略 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具 项目地址: https://gitcode.com/GitHub_Trending/tc/tchMaterial-parser tchMaterial-parser是一款专为教育工作者和学习…...

编程新知 2026/3/30 17:20:00

告别Xshell！Mac上这款免费串口工具CoolTerm，固件调试日志记录真香了

告别Xshell&#xff01;Mac上这款免费串口工具CoolTerm&#xff0c;固件调试日志记录真香了 从Windows切换到Mac平台的嵌入式开发者&#xff0c;最头疼的莫过于找不到趁手的串口调试工具。Xshell和SecureCRT在Windows上堪称神器&#xff0c;但它们的Mac版本要么收费高昂&#…...

编程新知 2026/3/30 17:07:55

人脸识别系统如何利用图像质量评估提升准确率？5个实战场景解析

人脸识别系统如何利用图像质量评估提升准确率&#xff1f;5个实战场景解析 在光线昏暗的便利店监控画面中&#xff0c;一位戴着口罩的顾客突然抬头看向摄像头——这个瞬间能否被准确识别&#xff0c;往往取决于系统对人脸图像质量的实时判断能力。图像质量评估&#xff08;FQA&…...

编程新知 2026/3/30 15:58:58

变压器差动保护MATLAB/simulink仿真 变压器差动保护仿真➕报告

变压器差动保护MATLAB/simulink仿真 变压器差动保护仿真➕报告第一部分&#xff1a;Simulink 仿真模型搭建指南 以下是变压器差动保护的Simulink模型搭建步骤及核心代码&#xff0c;包含模型参数设置、差动逻辑实现和仿真分析&#xff1a; 一、Simulink模型搭建 打开MATLAB&…...

编程新知 2026/3/30 15:56:58

Z-Image-Turbo_Sugar脸部Lora效果增强：ControlNet+Lora联合调控Sugar脸部结构

Z-Image-Turbo_Sugar脸部Lora效果增强&#xff1a;ControlNetLora联合调控Sugar脸部结构 想生成那种又纯又欲、甜度爆表的Sugar风格脸部图片吗&#xff1f;是不是经常遇到模型生成的脸型不够精致、五官比例失调&#xff0c;或者风格不够统一的问题&#xff1f;今天&#xff0c…...

编程新知 2026/3/30 15:34:48

嵌入式Linux实战：全志T3+vsftpd实现轻量级文件传输（含WinSCP连接教程）

嵌入式Linux实战&#xff1a;全志T3vsftpd实现轻量级文件传输&#xff08;含WinSCP连接教程&#xff09; 在物联网设备开发中&#xff0c;文件传输是一个看似简单却充满挑战的环节。当你的开发板是全志T3这样的资源受限平台时&#xff0c;如何在有限的存储和内存条件下搭建一个…...

编程新知 2026/3/30 13:10:28

暗黑破坏神2终极单机优化：PlugY生存工具包完整指南

暗黑破坏神2终极单机优化&#xff1a;PlugY生存工具包完整指南 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 厌倦了暗黑破坏神2单机模式的储物空间限制&#xff1f…...

编程新知 2026/3/30 12:08:05