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

C# Blazor 学习笔记(3):路由管理

news 2026/4/2 22:13:37

文章目录

  • 前言
  • 路由管理
    • App.razor
    • 设置登录页面
      • 设置空布局

前言

我们知道使用Blazor的官方模板，我们会自动得到一个拥有侧边栏的布局页面。但是我们发现我们所有新建的页面都有侧边栏。有时候我们需要跳出这个布局，比如我要做登录页面的时候，我们就希望只显示一个完整的页面，而不显示侧边栏。

路由管理

讲到Blazor的路由管理，那么就要讲到Blazor是怎么运行的。

App.razor

在这里插入图片描述
App.razor和Vue的App.vue很像。或者说Blazor继承了React,Vue,Angluar的优点。你可以看到很多其它前端框架的知识。虽然是缝合怪，但是缝的很不错。对于开发人员来说，好用就行了。

在这里插入图片描述
我们可以看到有多级标签

  • Router：路由管理
    • Found：如果页面找得到
      • RouteView：路由布局管理
        • DefaultLayout：默认路由管理布局
      • FocusOnNavigate：设置焦点，暂时不知道有啥用
    • NotFound：如果页面找不到

其实最重要的就是这个DefaultLayout，他指向了MainLayout，我们看看MainLayout里面是什么东西

@inherits LayoutComponentBase<PageTitle>BlazorApp1</PageTitle><div class="page"><div class="sidebar"><NavMenu /></div><main><div class="top-row px-4"><a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a></div><article class="content px-4">@Body</article></main>
</div>

重要的就是两个

  • @inherits LayoutComponentBase
    • 继承布局组件基类
  • @Body
    • 设置布局内容位置

设置登录页面

绕了一个大圈，终于到如何设置登录页面了。其实很简单，默认创建的都是执行默认布局。我们指定布局就可以了。
在这里插入图片描述

设置空布局

设置一个空布局

LoginLayout

@inherits LayoutComponentBase@Body

然后写一个登录页面

LoginLayout

@page "/login"
@layout LoginLayout
<h3>Login</h3>
<h3>这个是登录页面</h3>@code {}

运行成功

在这里插入图片描述

相关文章：

C# Blazor 学习笔记(3):路由管理

文章目录 前言路由管理App.razor设置登录页面设置空布局 前言 我们知道使用Blazor的官方模板&#xff0c;我们会自动得到一个拥有侧边栏的布局页面。但是我们发现我们所有新建的页面都有侧边栏。有时候我们需要跳出这个布局&#xff0c;比如我要做登录页面的时候&#xff0c;我…...

编程日记 2023/8/3 7:29:06

int[]数组转Integer[]、List、Map「结合leetcode：第414题 第三大的数、第169题 多数元素 介绍」

文章目录 1、int[ ] 转 Integer[ ]:2、两道leetcode题遇到的场景:2.1、int[ ] 转 List<Integer> :2.2、int[ ] 转 Map: 1、int[ ] 转 Integer[ ]: public static void main(String[] args) {int[] nums {1, 2, 3}; Integer[] array Arrays.stream(nums).boxed().to…...

编程日记 2023/8/3 7:28:05

vue子传父的一种新方法：this.$emit(‘input‘, value)可实现实时向父组件传值

今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。 众所周知&#xff0c;v-model是给input绑定&#xff0c;方便对表单的双向绑定。 其实&#xff0c;v-model是个语法糖&#xff0c;具体案例如下所示。 <input v-model"inputValue">相当于…...

编程日记 2023/8/3 7:27:01

【Web】web

dns与域名 网络是基于tcp/ip协议进行通信和连接的 应用层——传输层——网络层——数据链路层——物理层 每一定的台主机都有一个唯一且固定的地址标识——IP地址 IP地址的做用&#xff1a;1.区分用户和计算机&#xff1b;2.进行通信 IP地址由32位二进制数组成&#xff0c;…...

编程日记 2023/8/3 7:26:00

css中的bfc是什么？

什么bfc&#xff1f; BFC&#xff08;Block Formatting Context&#xff09;块级 格式化 上下文。 BFC就是页面上的一个隔离的独立盒子&#xff0c;容器里面的子元素和外面的元素不会相互影响。 为什么要bfc? bfc是我们去主动触发的,并不是自动就存在的,它是帮助我们解决cs…...

编程日记 2023/8/3 7:24:59

【前端知识】React 基础巩固(四十四)——其他Hooks（useContext、useReducer、useCallback）

React 基础巩固(四十四)——其他Hooks&#xff08;useContext、useReducer、useCallback&#xff09; 一、useContext的使用 在类组件开发时&#xff0c;我们通过 类名.contextType MyContext的方式&#xff0c;在类中获取context&#xff0c;多个Context或者在函数式组件中…...

编程日记 2023/8/3 7:23:57

华为云hcip核心知识笔记（数据库服务规划）

华为云hcip核心知识笔记&#xff08;数据库服务规划&#xff09; 1.云数据接库优势 1.1云数据库优点有&#xff1a; 易用性强&#xff1a;能欧快速部署和运行 高扩展&#xff1a;开放式架构和云计算存储分离 低成本&#xff1a;按需使用&#xff0c;成本更加低廉 2.云数据库r…...

编程日记 2023/8/3 7:22:52

【有趣的】关于Map的一些小测试

Map在代码中用到得非常多&#xff0c;它是无序的、key-value结构的&#xff0c;其读取会非常快。 今天看了个小文章Map判空 、空字符串、空key值等各种判断方法&#xff0c;你都掌握了吗&#xff1f;便自己也玩一下。 一、判空 因为对象已经new出来了&#xff0c;所以map指向的…...

编程日记 2023/8/3 7:21:47

【MATLAB第63期】基于MATLAB的改进敏感性分析方法IPCC，拥挤距离与皮尔逊系数法结合实现回归与分类预测

【MATLAB第63期】基于MATLAB的改进敏感性分析方法IPCC&#xff0c;拥挤距离与皮尔逊系数法结合实现回归与分类预测 思路 考虑拥挤距离指标与PCC皮尔逊相关系数法相结合&#xff0c;对回归或分类数据进行降维&#xff0c;通过SVM支持向量机交叉验证得到平均指标&#xff0c;来…...

编程日记 2023/8/3 7:20:47

AI 绘画Stable Diffusion 研究（二）sd模型ControlNet1.1 介绍与安装

部署包作者:秋葉aaaki 免责声明: 本安装包及启动器免费提供 无任何盈利目的 大家好&#xff0c;我是风雨无阻。 众所周知&#xff0c;StableDiffusion 是非常强大的AI绘图工具&#xff0c;需要详细了解StableDiffusion的朋友&#xff0c;可查看我之前的这篇文章&#xff1a; …...

编程日记 2023/8/3 7:19:45

接口参数设计原则

1. 不能太动态. 不相信客户端的原则 例如传递 filterFields , 推送一个表的某些字段给上游. 2. 可以服务端提供一些封装. 这个封装可以是写死的组合, 也可以是后端配置的. 最好的是 代码里的领域类bean 1,1对应一个名称. 可以是 classReference. 运营态有很多字段是给用户看的…...

编程日记 2023/8/3 7:18:44

网络安全防护利器：SK5代理与IP代理的技术对比

一、IP代理与SK5代理技术简介 IP代理&#xff1a; IP代理是一种通过中间服务器转发网络请求的技术。用户通过向代理服务器发出请求&#xff0c;代理服务器转发请求至目标服务器&#xff0c;然后将目标服务器的响应返回给用户。主要功能包括隐藏真实IP地址、绕过地理限制和IP封锁…...

编程日记 2023/8/3 7:17:43

IDEA删除本地git仓库、创建本地git仓库、关联其他仓库并上传

IDEA删除本地git仓库、创建本地git仓库、关联其他仓库并上传 删除本地Git仓库 创建本地Git仓库 关联其他仓库并上传 要在IntelliJ IDEA中删除本地Git仓库并创建新的本地Git仓库&#xff0c;以及关联其他仓库并上传&#xff0c;请按照以下步骤进行操作&#xff1a; 删除本地G…...

编程日记 2023/8/3 7:16:42

JavaEE简单示例——在使用Tomcat的时候可能出现的一些报错

简单介绍&#xff1a; 在我们之前使用Tomcat的时候&#xff0c;经常会出现在启动的时候因为一些报错导致项目无法正常的启动&#xff0c;我们就对一些比较常见的报错来看一下可能导致的原因&#xff0c;以及出现报错之后如何去解决。 严重: Failed to initialize end point a…...

编程日记 2023/8/3 7:15:41

webrtc的线程模型

目录 线程的声明 线程创建过程 向线程中投递消息 从消息队列中取消息的具体实现 处理线程消息 webrtc线程模块的实现逻辑在 rtc_base\thread.h 文件中 比如想创建一个线程&#xff1a; //声明要创建的线程指针&#xff0c;通过智能指针管理 std::unique_ptr<rtc::Thr…...

编程日记 2023/8/3 7:14:39

数据库备份还原-mysqldump、mydumper、xtrabackup、压缩

目录 数据库备份&#xff0c;数据库为school&#xff0c;素材如下 一、创建student和score表 二、为student表和score表增加记录 三、练习题 数据库备份&#xff0c;数据库为school&#xff0c;素材如下 一、创建student和score表 CREATE TABLE student ( id INT(10) NOT…...

编程日记 2023/8/3 7:13:35

【黑马程序员前端】JavaScript入门到精通--20230801

B站链接 理论 HTML相关知识【黑马程序员前端】 https://blog.csdn.net/m0_48964052/article/details/125951658 CSS相关知识【黑马程序员前端】 https://blog.csdn.net/m0_48964052/article/details/125951788 黑马程序员——JavaScript基础1&#xff08;初识 JavaS…...

编程日记 2023/8/3 7:12:34

100道Java多线程面试题（上）

线程创建方式&#xff1f; 线程有哪些基本状态? 如何停止一个正在运行的线程&#xff1f; 有三个线程T1,T2,T3,如何保证顺序执行&#xff1f; 在线程中你怎么处理不可控制异常&#xff1f; 如何创建线程池&#xff1f; 以下情况如何使用线程池&#xff1f;高并发、任务时间短;…...

编程日记 2023/8/3 7:11:31

web开发中的安全和防御入门——csp (content-security-policy内容安全策略)

偶然碰到iframe跨域加载被拒绝的问题&#xff0c;原因是父页面默认不允许加载跨域的子页面&#xff0c;也就是的content-security-policy中没有设置允许跨域加载。 简单地说&#xff0c;content-security-policy能限制页面允许和不允许加载的所有资源&#xff0c;常见的包括&a…...

编程日记 2023/8/3 7:10:30

定了！全国2023下半年软考（高级、中级、初级）报名时间汇总

截止到2023年8月2日&#xff0c;有以下地区公布了软考报名时间&#xff1a; 安徽软考2023下半年报名时间&#xff1a;8月15日9:00至8月21日16:00 黑龙江软考2023下半年报名时间&#xff1a;8月16日至8月22日 甘肃软考2023下半年报名时间&#xff1a;8月28日9:00至9月6日18:00…...

编程日记 2023/8/3 7:09:28

Python Decouple 的测试策略：如何确保配置的正确性

Python Decouple 的测试策略&#xff1a;如何确保配置的正确性 【免费下载链接】python-decouple Strict separation of config from code. 项目地址: https://gitcode.com/gh_mirrors/py/python-decouple 在软件开发中&#xff0c;配置管理的正确性直接影响应用的稳定性…...

编程新知 2026/4/2 21:08:28

Minecraft启动器与游戏配置工具全攻略：从新手到大师的进阶指南

Minecraft启动器与游戏配置工具全攻略&#xff1a;从新手到大师的进阶指南 Minecraft启动器是每一位玩家进入方块世界的第一道门&#xff0c;而一款优秀的游戏配置工具则能让你的冒险之旅更加顺畅。本文将以玩家视角&#xff0c;带你深入了解如何利用PCL2-CE这款强大的开源工具…...

编程新知 2026/4/2 20:34:09

掌握SQL窗口函数，轻松处理复杂数据分析

SQL 窗口函数&#xff08;Window Function&#xff09;是一种强大的分析工具&#xff0c;能够在不缩减原始数据行数的前提下执行复杂计算。这种函数通过对一组相关数据行&#xff08;称为"窗口"&#xff09;进行计算&#xff0c;并将结果直接附加到每一行记录中。窗口…...

编程新知 2026/4/2 20:05:52

如何在 Linux 系统中查看和管理网络接口？

一、 查看网络接口使用 ifconfig 命令 查看活动接口&#xff1a;直接输入 ifconfig 可显示当前系统所有已激活的网络接口信息。查看所有接口&#xff1a;使用 ifconfig -a 可显示当前系统所有的网络接口&#xff08;包括未激活的&#xff09;。使用 ip 命令 查看 IP 地址&#…...

编程新知 2026/4/2 19:43:44

实战指南：基于快马平台与yolov11快速开发货架商品检测系统

今天想和大家分享一个最近用yolov11实现的零售商品检测项目&#xff0c;整个过程在InsCode(快马)平台上完成得特别顺利。这个系统可以自动识别超市货架上的商品&#xff0c;特别适合库存管理或者智能结算场景。 项目背景与需求分析 超市货架商品识别看似简单&#xff0c;实际会…...

编程新知 2026/4/2 18:42:37

终极指南：让macOS Finder视频预览功能焕发新生的QLVideo插件

终极指南&#xff1a;让macOS Finder视频预览功能焕发新生的QLVideo插件 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://…...

编程新知 2026/4/2 18:28:30

C#实战：基于TouchSocket构建高性能WebSocket双向通信系统

1. WebSocket与TouchSocket核心概念 第一次接触WebSocket时&#xff0c;我被它的双向通信能力惊艳到了。想象一下快递员和收件人的关系&#xff1a;传统HTTP就像每次送货都要重新敲门确认身份&#xff08;建立连接&#xff09;&#xff0c;而WebSocket则像快递员直接把包裹交给…...

编程新知 2026/4/2 18:18:25

重构Switch游戏安装体验：Awoo Installer的突破与革新

重构Switch游戏安装体验&#xff1a;Awoo Installer的突破与革新 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 如果你是Nintendo Switch破解玩家…...

编程新知 2026/4/2 17:53:51

AI赋能国际化：让快马平台中的模型为你的trea国际版提供智能文案与适配建议

AI赋能国际化&#xff1a;让快马平台中的模型为你的trea国际版提供智能文案与适配建议 开发国际化应用时&#xff0c;最头疼的往往不是技术实现&#xff0c;而是如何让产品真正融入不同地区的文化和语言习惯。最近在开发trea国际版时&#xff0c;我发现InsCode(快马)平台的AI辅…...

编程新知 2026/4/2 17:35:27

探索汽车LAR LQG半主动/主动悬架：基于Simulink的奇妙之旅

汽车lar lqg 半主动/主动悬架 simulink在汽车工程领域&#xff0c;悬架系统犹如车辆的“脚”&#xff0c;直接影响着行驶的平顺性和安全性。今天咱们就来唠唠汽车的LAR LQG半主动/主动悬架&#xff0c;顺便用Simulink来比划比划。 LAR LQG悬架原理简述 LAR&#xff08;Linear …...

编程新知 2026/4/2 17:15:08