Blazor 的 NavLink 的 NavLinkMatch.Prefix 有啥作用

资料来源：网络整理时间：2023/2/14 1:00:44 共计：3634 浏览

默认的 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 其他使用默认值

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：@inject在 ASP.NET Core 中将依赖项注入到视图 | ·下一条：窗体操作标记帮助程序