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

Blazor_WASM之4：路由

news 2025/7/7 9:43:43

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

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/7/5 10:00:47

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/7/5 3:34:07

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/7/4 11:08:11

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/6/20 11:09:49

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/6/15 9:35:48

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/7/6 12:28:30

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/7/6 14:24:18

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/7/6 18:02:13