ToB企服应用市场:ToB评测及商务社交产业平台

标题: Blazor概述和路由 [打印本页]
作者: 瑞星    时间: 2022-6-23 22:10
标题: Blazor概述和路由
一 Blazor基础入门

1.1Blazor概述

Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架：
1.2 创建第一个Blazor项目




1.3 Razor组件

组件的概述

定义一个组件

在page文件夹下定义一个Counter组件

注意事项： 创建组件时必须以大写字母开头 以小写字母开头会报错
  1. @*定义路由*@
  2. @page "/counter"
  3. @*定义标题*@
  4. <PageTitle>Counter</PageTitle>
  6. <h1>Counter</h1>
  7. @*绑定变量*@
  8. <p role="status">Current count: @currentCount</p>
  9. @*定义按钮 绑定点击事件*@
  10. <button  @onclick="IncrementCount">Click me</button>
  12. @code {
  13.     @*定义变量*@
  14.     private int currentCount = 0;
  15.     @*定义事件进行+1操作*@
  16.     private void IncrementCount()
  17.     {
  18.         currentCount++;
  19.     }
  20. }
复制代码
1.4 路由模板

路由的概述

在Blazor中 每个页面都是一个组件 每一个组件 具有一个或多个路由 路由大部分发生在客户端

Router

下面是创建项目时 默认的App.Razor模板设置
  1. <Router AppAssembly="@typeof(Program).Assembly">
  2.     <Found Context="routeData">
  3.         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  4.     </Found>
  5.     <NotFound>
  6.         <p>Sorry, there's nothing at this address.</p>
  7.     </NotFound>
  8. </Router>
复制代码
Router组件将AppAssembly中和指定 AdditionalAssemblies 中的路由组件 当浏览器请求时 Router会获取导航 并使用提取的RouteData呈现 Found参数内容 如果路由和参数匹配 如果不匹配 会交给NotFound处理
RouteView 组件处理 RouteDate指定的组件  如果没有匹配的组件没有布局 使用可选的DefaultLayout
路由模板

在定义的Razor组件中 可以在组件中加入@Page "/路由地址" 表示该组件可以通过Router的导航 不定义就只能当做普通组件
  1. @page "/Route/{text}"
  2. <h1>传过来的参数为 @Text</h1>
  3. @code {
  4.     [Parameter]
  5.     public string? Text { get; set; }
  6. }
复制代码
路由参数

上面的示例代码中 @page "/Route/{text}" 大括号的部分代表路由参数 代表访问页面时可以接收一个参数。 声明参数时由于需要接收参数，也需要为参数定义一个接收参数对象
可选路由参数

可选路由参数也挺简单的 只需要在参数后面加个问号就可以
  1. @page "/Route/{text?}"
  2. <h1>传过来的参数为 @Text</h1>
  3. @code {
  4.      [Parameter]
  5.     public string? Text { get; set; }
  6.     @*如果为空就赋个默认值*@
  7.     protected override void OnInitialized()
  8.     {
  9.         Text = Text ?? "李四";
  10.     }
  11. }
复制代码
路由约束

路由约束强制路由段和组件之间进行类型匹配
  1. @page "/user/{Id:int}"
  2. <p>
  3.   Id:@Id
  4. </p>
  5. @code {
  6.    [Parameter]
  7.    public int Id { get; set; }
  8. }
复制代码
用于约束的列表

1.5导航组件

NavLink组件

创建导航链 使用NavLink组件代替HTML 标签 NavLink类似于标签 它根据active是否与当前URL匹配来切换href CSS类
示例代码
  1.     <nav >
  2.         
  3.             <NavLink  href="" Match="NavLinkMatch.All">
  4.                  主页
  5.             </NavLink>
  6.         
  7.         
  8.             <NavLink  href="counter" Match="NavLinkMatch.Prefix">
  9.                  计数器
  10.             </NavLink>
  11.         
  12.         
  13.             <NavLink  href="fetchdata">
  14.                  提取数据
  15.             </NavLink>
  16.         
  17.     </nav>
复制代码
NavLinkMatch.All -NavLink 在当前整个url匹配的情况下处于活动状态
NavLinkMatch.Prefix(默认) NavLink在与当前URL的任何前缀匹配的条件下处于活动状态

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4