ASP.NET Core Blazor WebAssembly中的路由指南

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=小明”。

上一篇： Vue中实现路由传参的多种方法探讨

下一篇： 几种常见的路由参数传递方法