ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Blazor 的 NavLink 的 NavLinkMatch.Prefix 有啥作用

2021-06-30 10:53:41  阅读:267  来源: 互联网

标签:5000 NavLink 0.1 NavLinkMatch Prefix http Blazor


默认的 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/ 欢迎大家访问,里面有很多新的博客。

如果在博客看到有任何不懂的,欢迎交流

标签:5000,NavLink,0.1,NavLinkMatch,Prefix,http,Blazor
来源: https://blog.51cto.com/u_11283245/2956747

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有