Blazor之路由

最新推荐文章于 2025-03-06 20:03:41 发布

65号腕

最新推荐文章于 2025-03-06 20:03:41 发布

阅读量1.6k

点赞数 1

分类专栏： Blazor

本文链接：https://blog.youkuaiyun.com/weixin_46295080/article/details/106959298

版权

本文详细介绍了Blazor中的路由机制，包括浏览器输入地址或点击链接的跳转、业务代码中的定向跳转，以及路由参数的使用。文章通过实例展示了如何利用NavigationManager进行页面跳转，并讨论了路由参数的声明与获取。此外，还提到了NavLink组件在高亮当前链接方面的应用。最后，列出了一些待研究的扩展话题，如单独定义页面模板和处理查询字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由的常用场景

Web开发当中，路由是指页面之间的相互跳转，最常见的有以下两种情况：

浏览器输入地址或者点击链接
业务代码的定向跳转

不管通过哪种方式，其实本质上都是一样的，都是通过URL的来定位到对应的页面。
这里还是以WebAssembly的项目为基础来探索一下路由的功能吧。对项目结构不清楚的朋友可以先看上一篇Blazor 初体验。

浏览器输入地址或者点击链接

通过上一篇Blazor 初体验我们已经知道每个页面都有个@page指令来定义该页面对应的URL。比如：

@page "/"
@page "/counter"
@page "/fetchdata"

这样页面和URL之间就有了对应关系(可以称之为路由表)。那如果我们输入的地址找不到对应的页面会发生什么情况呢？
笔者特意试了一下，输入http://localhost:5000/unkonw, 结果是这样的：
在这里插入图片描述

在此有必要再回顾一下App.razor页面：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">

最低0.47元/天解锁文章