web最精妙的设计就是通过url把多个页面串联起来,并且可以互相跳转。我们开发系统的时候总是需要使用路由来实现页面间的跳转。传统的web开发主要是使用a标签或者是服务端redirect来跳转。那今天来看看Blazor是如何进行路由的。

使用@page指定组件的路由path

我们可以在Blazor里给每个组件指定一个path,当路由匹配的时候会显示这个组件。

@page "/page/a"

 <h2>
PAGE A
</h2> @code { }

访问/page/a 看到Page A页面被渲染出来了。

注意:如果是在浏览器里敲入url按回车切换页面,会发生一次http请求,然后重新渲染blazor应用。

使用a标签进行页面跳转

a标签作为超链接是我们web开发最常用的跳转方式,blazor同样支持。

新建Page B

@page "/page/b"

 <h2>
PAGE B
</h2> @code { }

在Page A页面添加一个a标签进行跳转:

@page "/page/a"

 <h2>
PAGE A
</h2>
<p>
<a href="/page/b">Page B</a>
</p> @code { }

运行一下试试:

注意:使用a连接在页面间进行跳转不会发生http请求到后台,页面是直接在前端渲染出来的。

通过路由传参

通过http的url进行页面间传参是我们web开发的常规操作。下面我们演示下如何从Page A传递一个参数到Page B。我们预设Page A里面有个UserName需要传递到Page B,并且显示出来。

通过path传参

通过url传参一般有两种方式,一种是直接把参数组合在path里,比如“/page/b/小明”这样。

修改Page A:

@page "/page/a"

 <h2>
PAGE A
</h2>
<p>
<a href="/page/b/@userName">Page B</a>
</p> @code {
private string userName = "小明";
}

通过把userName组合到path上传递给Page B。

修改Page B:

@page "/page/b/{userName}"

 <h2>
PAGE B
</h2>
<p>
userName: @userName
</p> @code {
[Parameter]
public string userName { get; set; }
}

Page B 使用一个“/page/b/{userName}” pattern来匹配userName,并且userName需要标记[Parameter]并且设置为public。

通过QueryString传参

除了把参数直接拼接在path里,我们还习惯通过QueryString方式传递,比如“/page/b?username=小明”。

修改Page A:

@page "/page/a"

<h2>
PAGE A
</h2>
<p>
<a href="/page/b?username=@userName">Page B</a>
</p> @code {
private string userName = "小明";
}

首先安装一个工具库:

Install-Package Microsoft.AspNetCore.WebUtilities -Version 2.2.0

修改Page B:

@page "/page/b"

<h2>
PAGE B
</h2>
<p>
userName: @UserName
</p> @using Microsoft.AspNetCore.WebUtilities; @inject NavigationManager NavigationManager; @code {
[Parameter]
public string UserName { get; set; } protected override void OnInitialized()
{
var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
Console.WriteLine(NavigationManager.Uri);
UserName = userName.ToString();
Console.WriteLine(UserName); base.OnInitialized();
}
}

页面获取QueryString的传参比较麻烦,Blazor并没有进行封装。所以我们需要通过QueryHelpers.ParseQuery方法手工把QueryString格式化成字典形式,然后获取对应的参数。QueryHelpers类存在Microsoft.AspNetCore.WebUtilities这个库里,需要通过nuget安装。

NavLink

NavLink是个导航组件,它其实就是封装了a标签。当选中的时候,也就是当前的url跟它的href一致的时候,会自动在class上加上active类,所以可以用来控制选中的样式。默认的3个导航菜单就是用的NavLink。

比如导航到counter的NavLink:

   <NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>

最后翻译成html:

<a href="counter" class="nav-link active">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</a>

NavigationManager

有的时候我们可能需要在代码里进行导航,如果是JavaScript我们会用window.location来切换页面,Blazor为我们提供了相应的封装:NavigationManager。使用NavigationManager可以通过代码直接进行页面间的跳转。我们在Page A页面放个按钮然后通过按钮的点击事件进行跳转:

@page "/page/a"

<h2>
PAGE A
</h2>
<p>
<button @onclick="GoToB">
go to B
</button>
</p> @inject NavigationManager NavigationManager
@code { private void GoToB()
{
NavigationManager.NavigateTo("/page/b?username=小猫");
} }

修改Page A的代码,注入NavigationManager对象,通过NavigationManager.NavigateTo方法进行跳转。

扩张Back方法

Blazor封装的NavigationManager咋一看以为跟WPF的NavigationService一样,我想当然的觉得里面肯定有个Back方法可以进行后退。但是查了一番发现还真的没有,这就比较尴尬了,没办法只能使用JavaScript来实现了。

为了方便我们给NavigationManager直接写个扩展方法吧。

首先修改Program把IServiceCollection暴露出来:

    public class Program
{
public static IServiceCollection Services; public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app"); builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
Services = builder.Services; await builder.Build().RunAsync();
}
}

扩展类:

  public static class Ext
{
public static void Back(this NavigationManager navigation)
{
var jsruntime = Program.Services.BuildServiceProvider().GetService<IJSRuntime>();
jsruntime.InvokeVoidAsync("history.back");
}
}

这个扩展方法很简单,从DI容器里获取IJSRuntime的实例对象,通过它去调用JavaScript的history.back方法。

修改Page B:

@page "/page/b"

<h2>
PAGE B
</h2>
<p>
userName: @UserName
</p>
<p>
<button @onclick="GoBack">
Go back
</button>
</p> @using Microsoft.AspNetCore.WebUtilities; @inject NavigationManager NavigationManager; @code {
[Parameter]
public string UserName { get; set; } protected override void OnInitialized()
{
var uri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("username", out Microsoft.Extensions.Primitives.StringValues userName);
Console.WriteLine(NavigationManager.Uri);
UserName = userName.ToString();
Console.WriteLine(UserName); base.OnInitialized();
} private void GoBack()
{
NavigationManager.Back();
}
}

在Page B页面上添加一个按钮,点击调用NavigationManager.Back方法就能回到上一页。

总结

到此Blazor路由的内容学习的差不多了,整体上没有什么特别的,就是NavigationManager只有前进方法没有后退是比较让我震惊的。

相关内容:

ASP.NET Core Blazor Webassembly 之 数据绑定

ASP.NET Core Blazor Webassembly 之 组件

ASP.NET Core Blazor 初探之 Blazor WebAssembly

ASP.NET Core Blazor 初探之 Blazor Server

ASP.NET Core Blazor Webassembly 之 路由的更多相关文章

  1. ASP.NET Core Blazor Webassembly 之 数据绑定

    上一次我们学习了Blazor组件相关的知识(Asp.net Core Blazor Webassembly - 组件).这次继续学习Blazor的数据绑定相关的知识.当代前端框架都离不开数据绑定技术. ...

  2. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

  3. [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

    前言, Blazor Assembly 需要最少 1.9M 的下载量.  ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多,  ...

  4. ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

    Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...

  5. ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...

  6. ASP.NET Core Blazor WebAssembly实现一个简单的TODO List

    基于blazor实现的一个简单的TODO List 最近看到一些大佬都开始关注blazor,我也想学习一下.做了一个小的demo,todolist,仅是一个小示例,参考此vue项目的实现http:// ...

  7. 学习ASP.NET Core Blazor编程系列十——路由(上)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  8. 学习ASP.NET Core Blazor编程系列十——路由(中)

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  9. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台(实现菜单选中)

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

随机推荐

  1. java ->基本数据类型与包装类的概述和转化

    基本类型 包装类概述 在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们需要把字符串数据,根据需求转换成指定的基本数据类型,如年龄需要转换成int类型,考试成绩需 ...

  2. 可持续字典树 Perfect Security

    题目链接 题目大意:给你两个序列,第二个序列可以任意进行排列变换,然后由这两个序列一一异或得到答案序列,要求答案序列的字典序最小. 可持续字典树与第K大可持续线段树的区别主要在于每个节点上 ,它多了一 ...

  3. 07.django日志配置

    https://docs.djangoproject.com/en/3.0/topics/logging/ https://yiyibooks.cn/xx/python_352/library/log ...

  4. 花费一周刷完两份面试pdf(含答案)轻松拿下了抖音、头条、京东、小米等大厂的offer,成功度过程序员的寒冬。

    整理出一篇Java进阶架构师之路的核心知识,同时也是面试时面试官必问的知识点,篇章也是包括了很多知识点,其中包括了有基础知识.Java集合.JVM.多线程并发.spring原理.微服务.Netty 与 ...

  5. eclipse——Error exists in required project Proceed with launch?

    运行java文件时报错: Error exists in required project    Proceed with launch? 报错截图: 问题参生原因:开始Buildpath了一个jar ...

  6. poi——读取excel数据

    单元格类型 读取Excel数据 package com.java.test.poi; import java.io.File; import java.io.FileInputStream; impo ...

  7. Golang源码学习:调度逻辑(二)main goroutine的创建

    接上一篇继续分析一下runtime.newproc方法. 函数签名 newproc函数的签名为 newproc(siz int32, fn *funcval) siz是传入的参数大小(不是个数):fn ...

  8. docker的镜像加速

    docker加速配置 1,阿里云镜像加速 1.登录:https://dev.aliyun.com/search.html 2.登录阿里云 搜索   容器镜像服务  找到后如下图 ‘ 您可以通过修改da ...

  9. Verilog语言中的系统任务和系统函数

    Verilog语言中预先定义了一些任务和函数,用于完成一些特殊的功能,它们被称为系统任务和系统函数,这些函数大多数都是只能在Testbench仿真中使用的,使我们更方便的进行验证. `timescal ...

  10. C#不定长参数

    Test(5,6,7,8,9,10); void Test(int sd, params int[] arr)//不定长参数前要加params { for(int i = 0 ; i < arr ...