Blazor University (22)路由 —— 定义路由

原文链接:https://blazor-university.com/routing/

路由

与标准 ASP.NET MVC 一样,Blazor 路由是一种用于检查浏览器 URL 并将其匹配到要呈现的页面的技术。

ba6fe3187da138b2846c78c85e649f1c.png

路由比简单地将 URL 匹配到页面更灵活。它允许我们根据文本模式进行匹配,例如,上图中的两个 URL 都将映射到同一个组件并传入一个 ID 用于上下文(在本例中为 1 或 4)。

模拟导航

当 Blazor 应用导航到同一应用中的新 URL 时,它实际上并没有在传统的 WWW 意义上导航。不会向请求新页面内容的服务器发送请求。相反,Blazor 会重写浏览器的 URL,然后呈现相关内容。

另请注意,当导航到解析为与当前页面相同类型的组件的新 URL 时,组件不会在导航之前被销毁,并且不会执行 OnInitialized* 生命周期方法。导航被简单地视为对组件参数的更改。

定义路由

要定义路由,我们只需在任何组件的顶部添加 @page 声明。

@page "/"<h1>Hello, world!</h1>Welcome to your new app.

如果我们打开此视图的生成源代码(在 obj\Debug\netcoreapp3.0\Razor\Pages\Index.razor.g.cs 中),我们会看到编译为以下代码的 @page 指令。

[Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))]
[Microsoft.AspNetCore.Components.RouteAttribute("/")]
public class Index : Microsoft.AspNetCore.Components.ComponentBase
{
}

@page 指令在组件的类上生成一个 RouteAttribute。在启动期间,Blazor 会扫描使用 RouteAttribute 修饰的类并相应地构建其路由定义。

路由发现

路由发现由 Blazor 在其默认项目模板中自动执行。如果我们查看 App.razor 文件,我们将看到路由器组件的使用。

… other code …<Router AppAssembly="typeof(Startup).Assembly">… other code …</Router>
… other code …

Router 组件扫描指定程序集中实现 IComponent 的所有类,然后反射该类以查看它是否使用任何 RouteAttribute 属性进行修饰。对于它找到的每个 RouteAttribute,它都会解析其 URL 模板字符串,并将从 URL 到组件的关系添加到其内部路由表中。

这意味着单个组件可以用零个、一个或多个 RouteAttribute 属性(@page 声明)装饰。零个 RouteAttribute 属性的组件无法通过 URL 访问,而具有多个 RouteAttribute 属性的组件可以通过它指定的任何 URL 模板访问。

@page "/"
@page "/greeting"
@page "/HelloWorld"
@page "/hello-world"<h1>Hello, world!</h1>

页面也可以在组件库中定义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/287468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux文件I/O编程(二)lseek函数

文件I/O编程处理open、read、write、close&#xff0c;等必要函数对文件进行读写操作外&#xff0c;lseek、fcntl也是I/O编程很重要的函数。lseek函数lseek函数主要用来移动当前读写位置&#xff0c;第一个参数是文件描述符fd&#xff0c;第二个参数是偏移距离&#xff0c;第三…

[python opencv 计算机视觉零基础到实战] 十九、简易绘画板制作

一、学习目标 了解事件编写一个简易绘画板 二、了解如何制作简易绘画板 2.1 了解鼠标多种事件 上一节我们简单的使用opencv的图形绘制方法&#xff0c;用鼠标绘制了一些内容。上一节所响应的是简单的双击事件EVENT_LBUTTONDBLCLK&#xff0c;在OpenCV的鼠标事件中还有很多。…

Web App 和 Native App,哪个是趋势?

2019独角兽企业重金招聘Python工程师标准>>> Web App 和 Native App&#xff0c;哪个是趋势&#xff1f; https://www.zhihu.com/question/19558750 WebAPP与原生APP的交互设计区别 http://www.woshipm.com/ucd/132869.html Web App 开发使用哪种框架比较好&#xf…

基于天地图的应用服务系统设计开发—以甘肃高校招生服务为例

“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。它是“数字中国”的重要组成部分,是国家地理信息公共服务平台的公众版。“天地图”的目的在于促进地理信息资源共享和高效利用,提高测绘地理信息公共服务能力和水平,改进测绘地理信息成果的服务方式,更好地满足…

查缺补漏系统学习 EF Core 6 - 修改实体数据

推荐关注「码侠江湖」加星标&#xff0c;时刻不忘江湖事这是 EF Core 系列的第六篇文章&#xff0c;上一篇文章讲述了 EF Core 中的原始 SQL 语句查询。这篇文章讲一讲 EF Core 如何修改实体数据。点击上方或后方蓝字&#xff0c;阅读 EF Core 系列合集。实体状态在开始学习 EF…

情人节,我表白了CSDN小姐姐后,竟然...【为表白写了一个绘图工具,让我不再手残】

情人节&#xff0c;我表白了CSDN小姐姐后&#xff0c;竟然…竟然有人看了这篇文。 以下图片素材由一个还没写完的工具绘制&#xff0c;稍后会放在CSDN的代码仓库&#xff08;现在能用了&#xff0c;还没时间改&#xff0c;颜色填充算法还没写&#xff0c;有能力的朋友可以修改一…

【小程序】刘一哥课堂随机点名提问神器V1.0(附源程序)

为了能让我们的孩子们尽量来教室上课,增强课堂的参与度,激发课堂激情,提高学习效率,一哥也是煞费苦心,于是开发出了这么一款课堂点名提问神器,跟大家分享一下。 打开神器,看到的界面是这样子的,我很感激有勇气按时起床并能到教室的每一位有志之士。 点击【开始】按钮,…

Git客户端TortoiseGit(Windows系统)的使用方法

本文环境&#xff1a; 操作系统&#xff1a;Windows XP SP3 Git客户端&#xff1a;TortoiseGit-1.8.8.0-32bit 一、安装Git客户端 全部安装均采用默认&#xff01; 1. 安装支撑软件 msysgit: https://code.google.com/p/msysgit/downloads/list?qfullinstallerofficialgit 当前…

.Net 在容器中操作宿主机

1方案描述 在 docker 容器中想操作宿主机&#xff0c;一般会使用 ssh 的方式&#xff0c;然后 .Net 通过执行远程 ssh 指令来操作宿主机。本文将使用 交互式 .Net 容器版 中提供的镜像演示 .Net 在容器中如何操作宿主机。2前期准备 1. 宿主机上生成 ssh key生成 ss…

【看动漫学编程】程序员在异世界生个娃 第1篇:太极村

前言 作者文笔比较水&#xff0c;还请见谅。 以下内容还将使用视频动态漫画表现&#xff0c;剪辑完将会贴出链接。 小说剧情为剧情需要&#xff0c;过渡到知识点&#xff0c;部分篇幅可能没有技术知识点还望谅解。 由于没有经费支持&#xff0c;所以画出来的东西是我自己用代码…

【ArcGIS风暴】最牛逼空间数据批处理神器来了:用户自定义工具箱GeoStorm.tbx

【Warming up】在学习和工作的过程中,作者曾写过很多采用ArcGIS模型构建器(Model Builder)、Python代码等批处理方法(感兴趣的GISers可以去【测绘地理信息Big风暴专】栏去交流学习指导),大大的减轻了操作压力,提高了工作效率。今天给大家展示一款神器:自定义工具箱GeoS…

Linux下c/c++项目代码覆盖率的产生方法

最近做了一系列的单元测试相关的工作&#xff0c;除了各种规范及测试框架以外&#xff0c;讨论比较多的就是关于代码覆盖率的产生&#xff0c;c/c与其他的一些高级语言或者脚本语言相比较而言&#xff0c;例如 Java、.Net和php/python/perl/shell等&#xff0c;由于没有这些高级…

C# WPF从后台代码生成行列可变的表格

z概述WPF常用的表格控件是DataGrid&#xff0c;这个控件在前台XAML编写的话&#xff0c;一般列已经固定&#xff0c;然后给每个列去绑定数据&#xff0c;但是如果我的列不固定&#xff0c;随着运算结果变动呢&#xff1f;这时候DataGrid&#xff0c;就比较难实现这个需求&#…

软件架构实践文章链接

2019独角兽企业重金招聘Python工程师标准>>> 架构 InfoQ: 又拍网架构中的分库设计 SNS网站数据库技术分析 - 51CTO.COM 数据库水平切分的实现原理解析 - iBATIS - Java - JavaEye论坛 基于amoeba的mysql分布式数据库学习&#xff08;一&#xff09; - Java - JavaEy…

数据库SQL语句学习笔记(6)-使用函数处理数据

1.SQL也可以用函数来处理数据&#xff0c;函数一般是在数据上执行的&#xff0c;为数据的转换和处理提供了方便。但是每一个数据库管理系统&#xff08;DBMS&#xff09;都有特定的函数&#xff0c;事实上&#xff0c;只有少数几个函数被所有的DBMS等同地支持。例如&#xff0c…

【遥感物候】Matlab求解一元六次多项式,计算植被生长季始期

一元六次多项式能很好的逼近滤波后的曲线,与二次多项式相比,在拟合植被整个生长季曲线方面有更好的优势,该方法常用来描述北方温带和高纬度地区时序NDVI生长季模式。因此,本文使用一元六次多项式来拟合植被整个生长季曲线,效果很好。那么拟合后,这样解方程呢求生长季参数…

最全面透彻的RabbitMQ指南

概念RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff08;亦称面向消息的中间件&#xff09;。RabbitMQ服务器是用Erlang语言编写的&#xff0c;而集群和故障转移是构建在开放电信平台框架上的。所有主要的编程语言均有与代理接口通讯…

TensorFlow中RNN实现的正确打开方式

上周写的文章《完全图解RNN、RNN变体、Seq2Seq、Attention机制》介绍了一下RNN的几种结构&#xff0c;今天就来聊一聊如何在TensorFlow中实现这些结构&#xff0c;这篇文章的主要内容为&#xff1a; 一个完整的、循序渐进的学习TensorFlow中RNN实现的方法。这个学习路径的曲线较…

《看聊天记录都学不会C语言?太菜了吧》(2)我说编程很容易你们不服?

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…

LCD1602,4位数据总线液晶屏时钟,STC12C5A60S2的10位ADC功能程序

/* 程序名&#xff1a;    LCD1602&#xff0c;4位数据总线液晶屏时钟&#xff0c;STC12C5A60S2的10位ADC功能程序 编写时间&#xff1a;  2015年10月4日 硬件支持&#xff1a;  LCD1602液晶屏 STC12C5A60S2 外部12MHZ晶振 接线定义&#xff1a; DB7 --> P1^7DB6…