Blazor 根据路由判断哪些页面需要加模板,哪些不需要

news/2025/2/2 1:43:09/

比如我们的登录的页面是不需要加通用模板的,通过@if 控制 RouteView的DefaultLayout即可

<BootstrapBlazorRoot><Router AppAssembly="@typeof(App).Assembly"><Found Context="routeData"><PageTitle>Title</PageTitle>@if (routeData.PageType == typeof(BlazorApp.Pages.Login)){<RouteView RouteData="@routeData" />}else{<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />}<FocusOnNavigate RouteData="@routeData" Selector="h1" /></Found><NotFound><PageTitle>Not found</PageTitle><LayoutView Layout="@typeof(MainLayout)"><p> 正在玩命开发中 ...</p></LayoutView></NotFound></Router>
</BootstrapBlazorRoot>

上面的方式适合静态配置,一般页面菜单都是动态,可以用下面的方式实现

@inject DataService dataService@implements IDisposable@if (showTemplate)
{<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
}
else
{<RouteView RouteData="routeData" DefaultLayout="" />
}@code {private bool showTemplate;private RouteData routeData;protected override async Task OnInitializedAsync(){// 从后台获取数据var data = await dataService.GetData();// 根据获取到的数据判断是否需要使用模板if (data.NeedsTemplate){showTemplate = true;}else{showTemplate = false;}// 设置路由数据routeData = GetRouteData();await base.OnInitializedAsync();}private RouteData GetRouteData(){// 获取路由数据的方法(根据你的实际情况编写)// 返回你想要的路由数据对象}public void Dispose(){// 在需要释放资源时进行清理工作(根据你的需求进行实现)}
}
 

在上述示例中,我们通过 ​@inject​指令注入了一个名为 ​DataService​的服务,用于获取后台数据。在 ​OnInitializedAsync​生命周期方法中,我们通过调用 ​dataService.GetData()​方法获取数据,并根据数据的特定属性进行条件判断。根据判断结果,我们设置 ​showTemplate​变量来决定是否使用模板。

然后,我们使用 ​@if​语句根据 ​showTemplate​的值来选择性地设置 ​DefaultLayout​属性。如果 ​showTemplate​为 ​true​,则应用默认的模板布局;如果为 ​false​,则不应用任何模板。

最后,我们还定义了 ​GetRouteData()​方法来获取自定义的路由数据,并将该数据赋值给 ​routeData​变量。

请注意,在使用 ​implements IDisposable​的情况下,我们可以在 ​Dispose()​方法中进行资源清理工作,如释放订阅、取消网络请求等。根据你的具体需求,你可以根据情况进行实现。


http://www.ppmy.cn/news/1324711.html

相关文章

【Docker】安装 Nacos容器并根据Nginx实现负载均衡

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…

前端开发 0: 前端环境搭建

欢迎来到我即将展开的一系列博客&#xff0c;将带你踏上前端开发的奇妙之旅&#xff01;在这个数字化时代&#xff0c;前端开发成为了构建现代网页和应用程序的关键技能。无论你是刚刚入门还是已经有一些经验&#xff0c;这个系列将为你提供宝贵的知识和实用的技巧&#xff0c;…

js动态设置关键侦@keyframes

js动态设置关键侦keyframes 1.前置知识 关键侦keyframes规则通过在动画序列中定义关键侦的样式来控制CSS动画序列的中间步骤 keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);} } // from 等价于 0%&#xff1b;to 等价与 100% // 或…

【Docker】网络模式详解及容器间网络通信

目录 一、概述 二、默认网络 三、网络模式及应用 1. Bridge模式 2. Host模式 3. none网络模式 四、自定义网络应用 1. 网络相连 2. 自定义通讯 3. 自定义IP 每篇一获 一、概述 在 Docker 中&#xff0c;网络设置包括 IP 地址、子网掩码、网关、DNS 和端口号等关键组…

macbookpro怎么录屏?Camtasia Studio2023进行屏幕录制的方法教程

macbookpro怎么录屏 录屏是一种很常见的操作&#xff0c;可以把你的桌面内容录制下来&#xff0c;分享给他人&#xff0c;或者保存下来做备份&#xff0c;它可以帮助你展示你的软件&#xff0c;网站&#xff0c;游戏&#xff0c;技术教程&#xff0c;以及其他任何你想要展示的…

Linux:shell脚本:基础使用(8)《函数局部|全局变量函数传入位置变量return》

基本的函数定义 把一些重复调用的命令写进一个函数里&#xff0c;下次直接调用函数名&#xff0c;这样的既方便修改&#xff0c;又可以让思路清晰 function 函数名(){ 当调用这个函数时候执行的命令...... } 这个是一个基础的函数定义&#xff0c;当然你不加function也是可以的…

什么是SFP光学模块?

SFP光模块是一个十亿位电信号到光信号接口设备&#xff0c;是行业标准的小型可插拔千兆光收发器模块&#xff0c;集成可插拔交换机&#xff0c;路由器和其他网络设备&#xff0c;媒体转换器SFP端口&#xff0c;用于连接到光或铜线数据传输网络&#xff0c;我们通常可以在以太网…

财务思维一张图

系统研读了《肖星的财务思维课》和得到《贾宁财务思维课》&#xff0c;尝试用一张最简单的图总结财务思维所学到精髓吧。 《肖星的财务思维课》 得到《贾宁财务思维课》 附&#xff1a; 【清华大学】最好的财务课《商业的财务逻辑》&#xff08;全7课&#xff09;肖星教授 【…