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

文章目录

前言

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

路由管理

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

App.razor

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

我们可以看到有多级标签

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

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

html 复制代码
@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 {

}

运行成功

相关推荐
颜颜yan_18 分钟前
UU远程——让工作、学习、娱乐跨设备无缝衔接,“远程”更像“身边”
学习·娱乐·远程工作
新子y1 小时前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
哆啦A梦15882 小时前
点击Top切换数据
前端·javascript·vue.js
梁辰兴2 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
degen_2 小时前
第一次进入 PEICORE 流程
c语言·笔记
YJlio2 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
deng-c-f2 小时前
Linux C/C++ 学习日记(30):协程(一):同步和异步、协程的简要介绍、用户态CPU调度的实现
学习·协程·同步/异步
摇滚侠3 小时前
Spring Boot 3零基础教程,WEB 开发 Thymeleaf 核心语法 笔记39
spring boot·笔记·后端·thymeleaf
张人玉3 小时前
WPF 常用样式属性及示例笔记
笔记·wpf
@PHARAOH3 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js