默认的 NavLink 的 Match 的默认值就是 NavLinkMatch.Prefix 表示只要当前的链接的路由的前部分和 href 的相同,那么将匹配上,修改样式为高亮
本文记于 2020.06.25 也许后续也有点变更
在 NavLink 的取值上有两个可选的值,一个是 NavLinkMatch.All 另一个是 NavLinkMatch.Prefix 按照官方的定义如下
- NavLinkMatch.All:NavLink 在与当前整个 URL 匹配的情况下处于活动状态。
- NavLinkMatch.Prefix(默认):NavLink 在与当前 URL 的任何前缀匹配的情况下处于活动状态。
官方这两句是什么意思,可以看到在 NavLink 有一个 href 属性,如下面代码
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
此时的 NavLink 没有添加 Match 的值,因此是默认 NavLinkMatch.Prefix 表示只要前缀是 counter 的就激活这一项
因此访问链接如 http://127.0.0.1:5000/counter/123
或 http://127.0.0.1:5000/counter
处于都满足前缀是 coutner 因此激活这一项
但如 http://127.0.0.1:5000/counter123
链接,此时是 counter123
不满足此前缀哦,不会激活这一项
而 NavLinkMatch.All 要求是完全匹配,如将上面代码修改如下
<NavLink class="nav-link" href="counter" Match="NavLinkMatch.All">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
此时只有访问 http://127.0.0.1:5000/counter
才会激活,访问 http://127.0.0.1:5000/counter/123
不会激活
默认创建的 Blazor 的 WebAssembly 项目可以在 Shared\NavMenu.razor
找到如上代码,默认只有 href=""
被设置为 NavLinkMatch.All
其他使用默认值
本文所有代码放在 github 欢迎小伙伴访问
官方文档请看 ASP.NET Core Blazor 路由
特别推荐两个很好用的 Blazor 的 UI 库
本文会经常更新,请阅读原文: https://blog.lindexi.com/post/Blazor-%E7%9A%84-NavLink-%E7%9A%84-NavLinkMatch.Prefix-%E6%9C%89%E5%95%A5%E4%BD%9C%E7%94%A8.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。
如果你想持续阅读我的最新博客,请点击 RSS 订阅,推荐使用RSS Stalker订阅博客,或者收藏我的博客导航
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 。
无盈利,不卖课,做纯粹的技术博客
以下是广告时间
推荐关注 Edi.Wang 的公众号
欢迎进入 Eleven 老师组建的 .NET 社区
以上广告全是友情推广,无盈利