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

Blazor_WASM之4：路由

news 2026/2/8 22:09:59

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

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2026/1/31 12:52:04

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2026/2/1 16:32:53

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/31 13:13:32

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/2/8 22:07:52

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46