- 综合排序
- 最热优先
- 最新优先
- 来自专栏AI.NET极客圈
Blazor 中的路由和路由模板
目前所有 Web 开发框架都具有路由组件，Blazor 也不例外。在本文中，我将探讨 Blazor 路由引擎的实现和编程接口。 路由引擎 Blazor 路由引擎是在客户端运行的组件。 与 Angular 路由器不同，它在获取路由参数后无法异步运行解析步骤。最后，Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到的。 在 Blazor 中，URL 模式或路由模板被收集在路由表中。该表通过查看使用 Route 属性修饰的 Blazor 应用程序的组件进行填充。每个组件的路径都将成为受支持的路由模板。 值得注意的是，Blazor 在同一视图中支持多个路由指令。 此外还可以通过编程方式触发 Blazor 路由器。若要通过 Blazor 页面中的代码进行导航，应首先为 IUriHelper 抽象类型注入已配置的依赖项。
11.3K21发布于 2019-08-16 - 来自专栏技术之路
Blazor-路由模板（下）
我们试试能否正常访问 @page "/demoPage/{id:int}" <h3>demoPage</h3>
路由参数Id：@Id
@code { [Parameter] 我们在这里为id添加了约束{id:max(100)} @page "/demoPage/{id:max(100)}" <h3>demoPage</h3>路由参数Id：@Id
@code 我们修改为string试试效果如何 @page "/demoPage/{id:max(100)}" <h3>demoPage</h3>路由参数Id：@Id
@code { [ ; } 这次运行正常了，并且超出路由限制的无法访问 catch-all 路由 @page "/demoPage/{*AnyRoute}" <h3>demoPage</h3>路由参数：@AnyRoute 这样的方式我们仍然可以读取到参数 @page "/demoPage" <h3>demoPage</h3>
路由查询参数：@Parameter
路由查询参数：@B
@code25410编辑于 2025-03-06 - 来自专栏技术之路
Blazor-组件路由事件
在当前页面上单击链接或通过代码执行 NavigateTo()方法都可以转向目标 URL，但要注意如下事项： (1) 在独立 Blazor WebAssembly 应用程序中，通过单击链接或通过代码执行 (3) 在 Blazor WebApp 中，任何呈现模式的交互位置为每页/组件时，单击当前页面上的链接进行转向，不会触发RegisterLocationChangingHandler()方法注册导航事件 注册事件 @page "/demoPage" @inject NavigationManager NavigationManager <h3>demoPage</h3> <button @onclick WebApp 中组件路由守卫，二者区别如下： 触发时机： (1) RegisterLocationChangingHandler()方法：导航正在发生之前运行，导航还未发生转向，还未跳转到目标 URL 触发条件： (1) LocationChanged 事件可以在任何的 Blazor 项目中通过代码和链接都可以被触发。
84110编辑于 2025-03-25 - 来自专栏技术之路
Blazor-路由模板（上）
Blazor 的路由模板是定义应用中不同页面或组件访问路径的一种方式。通过路由模板，你可以管理应用程序的导航结构，支持基本路由、参数路由、子路由和区域路由等功能。 我们为访问组件使用@page 指令指定路由 URL @page "/demoPage" <h3></h3> @code { } 如这个页面我们设置了路由为/demoPage，/demoPage 是可以直接访问 " @attribute [Route("/demoPage")] 常量路由模板 @attribute [Route(UrlTemplate)] <h3>demoPage</h3>
路由参数：@ <h3>demoPage</h3>
路由参数：@Id
@code { [Parameter] public string? <h3>demoPage</h3>路由参数Id：@Id
路由参数Name：@Name
@code { [Parameter] public string23300编辑于 2025-03-06 - 来自专栏EdisonTalk
Blazor学习之旅(6)路由系统
Blazor 的路由系统就和 ASP.NET MVC的路由系统一样，可以为我们提供灵活的选项，可用于确保用户请求到达可处理它们并返回用户想要的信息的组件。 本篇，我们来了解下在Blazor中的路由系统。 使用路由模板 在 Blazor 中，使用路由来确保将每个请求发送到最适合的组件，并且该组件具有显示用户所需内容的全部信息。 Blazor 使用名为 Router 组件的专用组件路由请求。 如果我们想要在Blazor中获取到jaychou，就可以使用路由参数。 下面的示例代码就展示了@page 指令中使用大括号来指定路由参数并为其命名。 小结 本篇，我们了解了在Blazor中的路由系统。 下一篇，我们学习一下在Blazor中的布局系统。
1.2K20编辑于 2023-07-27 - 来自专栏技术之路
Blazor-全局路由跳转事件
(3) 使用NavigationManager.NavigateTo()方法以代码的方式访问页面会触发 事件触发测试 在Router.razor文件中使用OnNavigateAsync事件 @inject 可以正确输出，触发事件成功 代码跳转 @page "/demoPage" @rendermode InteractiveAuto @inject NavigationManager Navigation <h3> DemoPage</h3> <button @onclick="NavigateTo">代码跳转</button> @code { private void NavigateTo()
43500编辑于 2025-03-07 - 来自专栏token的技术分享
Blazor资源大全，很棒的Blazor(3)
Podcasts Chris Sainty: Blazor in Action - Azure DevOps Episode 238 - 2023年3月27日 - Chris是一位微软MVP、作者和拥有 .NET Rocks - Blazor United with Javier Nelson and Steve Sanderson - 2023年3月23日 - 如果你不必在客户端和服务器端Blazor 书籍 学习 Blazor - 使用 WebAssembly 和 C# 构建单页应用程序（作者：David Pine，通过 O'Reilly 于 2022年2月3日提前发布）。 Microsoft Blazor: 使用 .NET 6 和更高版本构建 Web 应用程序 - 使用 .NET 6 学习 Blazor 的实用方法和实践（第3版（2021年12月8日））。 Blazor 简明指南 - 2020年4月16日 - 一本免费的入门 Blazor 框架的电子书。 Blazor，入门指南 - 2020年3月18日 - 一本免费的入门 Blazor 框架的电子书。
2.3K40编辑于 2023-10-13 - 来自专栏.NET开发那点事
ASP.NET Core Blazor Webassembly 之 路由
我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。 使用@page指定组件的路由path 我们可以在Blazor里给每个组件指定一个path，当路由匹配的时候会显示这个组件。 默认的3个导航菜单就是用的NavLink。 总结 到此Blazor路由的内容学习的差不多了，整体上没有什么特别的，就是NavigationManager只有前进方法没有后退是比较让我震惊的。 初探之 Blazor WebAssembly ASP.NET Core Blazor 初探之 Blazor Server
3.2K10发布于 2020-06-19 - 来自专栏科控自动化
Blazor练习3 -数据绑定
默认绑定 1.使用方法 Blazor中Razor组件通过一个名为@bind的HTML元素属性提供数据绑定功能，数据绑定的对象可以为字段、属性或表达式值。
69220编辑于 2022-03-29 - 来自专栏Blazor入门到实战
ASP.NET Core Blazor 路由配置和导航
本文系统介绍了Blazor单页应用的路由机制。 文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式，完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。1、什么是 Blazor 路由？ Blazor 路由是一个将 URL 映射到特定组件的系统，允许构建单页应用（SPA）而无需页面刷新。 页面路由定义在Blazor中使用 @page “url路径” 来表示路由地址，比如/home，那么该页面的请求地址就是域名:端口号/home；一个组件也可以设置多个路由访问。<! Core Blazor 路由配置和导航》的所有内容，感谢你的阅读，希望对你有所收获。
30210编辑于 2025-10-24 - 来自专栏全栈程序员必看
Blazor入门_blazor视频教程
这篇文章演示了如何使用Blazor构建SPA应用。Blazor简化了可在任何浏览器中运行的快速且美观的SPA的任务。它通过使开发人员能够编写基于Dotnet的Web应用程序来实现此目的。 让我们开始使用Blazor吧。 这指定组件的路由端点。一个组件可以通过具有多个 @page指令来具有多个路由属性。 @inject – 你可以使用 @inject属性将服务注入组件。 下一步工作 除了此篇文章外，我还计划写其他几篇文章： 使用 Blazor和 EntityFrameworkCore进行CRUD操作 Blazor中模型验证 Blazor应用程序的容器化 Blazor的路由 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。
6.1K20编辑于 2022-11-16 - 来自专栏技术之路
Blazor-Blazor呈现概念
静态和交互式呈现概念 在Blazor开发中，Razor 组件具备两种重要的呈现方式，分别是静态呈现和交互式呈现。 静态呈现 也被称为静态渲染，是一种典型的服务器端方案。 另一方面，在客户端的浏览器中，基于 WebAssembly 的 Blazor 运行时能够处理事件，这使得用户在浏览器端就能获得即时的交互反馈，极大地提升了用户体验，像一些在线表单填写、实时数据可视化展示等功能 CSR 假定是交互式的，因此行业或 文档中不使用“交互式客户端呈现”和“Blazor CSR”。 ○ 交互式 SSR：Blazor 事件允许用户交互，并且 Razor 组件状态由 Blazor 框架维护。
82100编辑于 2025-01-25 - 来自专栏EdisonTalk
Blazor学习之旅 (14) Blazor WebAssembly
Blazor 是在 .NET 和 Razor 上构建的用户界面框架。 除此之外，Blazor还提供了另一种模式，就是我们今天要学习的 Blazor WebAssembly！ Blazor WebAssembly（有时简称为 Blazor WASM）是 Blazor 用户界面框架的实现，在所有新式浏览器中均包含的 HTML5 标准 WebAssembly 运行时上运行。 接下来，我们就来使用Blazor WebAssembly来体验一下。 F5开始运行，浏览器会显示一定时间（大概好几秒钟）的Loading，在Blazor WebAssembly首次访问时需要下载相比Blazor Server更多的文件到浏览器。
1.6K10编辑于 2024-01-06 - 来自专栏技术之路
Blazor-Blazor WebAssmbly项目结构（下）
Blazor-Blazor WebAssmbly项目结构（上） 接上次这次我们继续来说说剩余的项目文件 _Imports.razor _Imports.razor 文件的功能是定义一组 Razor 指令或命名空间 NavMenu 是导航菜单组件，对应上图左侧导航菜单，标记呈现的就是右侧大部分的空白区域，展示Url 路由地址访问的组件内容，呈现的位置就是在标记中的@Body 所在的位置。
46800编辑于 2025-01-24 - 来自专栏token的技术分享
Blazor资源大全，很棒的Blazor(2)
BlazorTransitionableRoute - 允许当前和上一个路由同时存在，从而实现UI/UX设计系统的过渡动画。 BlazorRouter - BlazorRouter是一个受react-router启发的令人敬畏的路由器，为Blazor提供声明式路由。 其他 Blazor Extensions Home - Blazor扩展的主页。 Bolero - F#的Blazor，具有热重新加载的模板、类型安全的端点和路由、远程调用等等。 使用F#进行Blazor开发，使用计算表达式（CE）风格的DSL进行内部和第三方Blazor库的开发，依赖注入，自适应和Elmish模型，Giraffe风格的路由，类型安全风格。 我为什么为Blazor应用程序创建了另一个下载库的3个原因 - 2022年6月29日 - 我为什么为Blazor应用程序创建了另一个下载库的3个原因。
3.8K20编辑于 2023-10-13 - 来自专栏晓晨的专栏
Blazor 修仙之旅 - Ant Design of Blazor
一.前言 这是《Blazor 修仙之旅》的第三篇，前面两分别是《初次尝试》、《组件与数据绑定》，直接到这里上 Ant Design 确实连不起来，跨度比较大，其实我也是在边学边写，看的是官方文档，我觉得中间这部分重复写博客的意义不大 Ant Design of Blazor 介绍 ant-design-blazor 是国内开发者 ElderJames 创建的一个开源项目。 顾名思义，ant-design-blazor 是 Ant Design 的 Blazor 实现，开发和服务于企业级后台产品。 ✨ 特性 ? 提炼自企业级中后台产品的交互语言和视觉风格。 ? 从ant-design-blazor README 摘点内容撑一撑篇幅（手动滑稽） 三.使用 直接新建一个 Blazor WebAssembly 项目，或者使用前两篇文章中的 Demo。 四.Ant Design of Blazor 资料 文档：点我 开源地址：点我
1.4K10发布于 2020-06-04 - 来自专栏Blazor入门到实战
ASP.NET Core Blazor简介和快速入门三（布局和路由）
本文介绍了Blazor中的布局、路由和条件渲染功能。 3、应用布局在razor文件顶部申明“@layout 模板页名”来设置母版页，如果一个页面没有设置模板页，（就像blazor默认项目那样），他就会使用在app.razor文件中定义的默认模板页如何不设置任何模板页 view=aspnetcore-9.0二、路由配置和导航ASP.NET Core Blazor 路由配置和导航-腾讯云开发者社区-腾讯云三、条件渲染和循环渲染第一章中已经讲过了Blazor的语法。 while 与foreach类似这里就不在赘述<h3>用户列表</h3>
Name Age Gender 29510编辑于 2025-11-05Vue3 路由
本章节我们将为大家介绍 Vue 路由。 Vue 路由允许我们通过不同的 URL 访问不同的内容。 代码如下所示： HTML 代码 <script src="https://unpkg.com/vue@<em>3</em>"></script> <script src="https://unpkg.com/vue-router -- <em>路由</em>出口 --> <! 定义一些<em>路由</em> // 每个<em>路由</em>都需要映射到一个组件。 // 我们后面再讨论嵌套<em>路由</em>。 const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, ] // <em>3</em>.
22110编辑于 2025-12-16来自专栏小蔚记录vue3 路由
今天 创建了一个demo 试试看看vue3 的新特性，发现路由都不会了...... 正题开始 1. 首先 vue3 的脚手架 直接使用官方的 ( 前提，你先看看node.js 的版本是不是需要更新的哈 ) 2. 3. 路由 跳转 创建 router/index.js 文件 除了红框内部，别的地方没有变化 4. man.js 使用 vue3 的 创建实例的方法发生 了改变。就这种方式就好
49720编辑于 2023-03-01来自专栏奔跑的人生3. 网关路由
作用 认证，鉴权（Authentication/Security） 预判（Insights） 压力测试（Stress Testing） 灰度/金丝雀测试（Canary Testing） 动态路由（Dynamic service-url: defaultZone: http://server1:7777/eureka/,http://server2:8888/eureka/,http://server3: : ad-gateway-zuul zuul: ignored-services: '*' # 过滤所有请求，除了下面routes中声明过的服务 routes: sponsor: #在路由中自定义服务路由名称 path: /ad-sponsor/** serviceId: mscx-ad-sponsor #微服务name strip-prefix: false search: #在路由中自定义服务路由名称
64020发布于 2019-09-10腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号