企业建网站哪家好,工商网,厦门网站外包,中国设计联盟网服务特点文章目录 前言路由管理App.razor设置登录页面设置空布局 前言
我们知道使用Blazor的官方模板#xff0c;我们会自动得到一个拥有侧边栏的布局页面。但是我们发现我们所有新建的页面都有侧边栏。有时候我们需要跳出这个布局#xff0c;比如我要做登录页面的时候#xff0c;我… 文章目录 前言路由管理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 LayoutComponentBasePageTitleBlazorApp1/PageTitlediv classpagediv classsidebarNavMenu //divmaindiv classtop-row px-4a hrefhttps://docs.microsoft.com/aspnet/ target_blankAbout/a/divarticle classcontent px-4Body/article/main
/div
重要的就是两个
inherits LayoutComponentBase 继承布局组件基类 Body 设置布局内容位置
设置登录页面
绕了一个大圈终于到如何设置登录页面了。其实很简单默认创建的都是执行默认布局。我们指定布局就可以了。
设置空布局
设置一个空布局
LoginLayout
inherits LayoutComponentBaseBody然后写一个登录页面
LoginLayout
page /login
layout LoginLayout
h3Login/h3
h3这个是登录页面/h3code {}
运行成功
