如何仅在我的活动页面中自定义导航项元素

Posted 2023-02-22

【中文标题】如何仅在我的活动页面中自定义导航项元素

【英文标题】：How do i customize nav-item element only in my active page

【发布时间】：2020-07-12 13:31:18

【问题描述】：

我是 Vue.js 和 Nuxt 的新手，我希望我的背景 img（项目顶部的蓝线）仅出现在我的活动页面（例如联系页面）中

这是我的 HTML 代码：

<b-navbar-nav class="text">
    <b-nav-item to="/">ACCUEIL</b-nav-item>
    <b-nav-item href="/#">ARTICLES</b-nav-item>
    <b-nav-item href="#">CARTE</b-nav-item>
    <b-nav-item to="/about">L'ÉQUIPE</b-nav-item>
    <b-nav-item to="/contact">CONTACT</b-nav-item>
  </b-navbar-nav>

还有我的CSS：

有什么帮助吗？

【参考方案1】：

您可以使用nuxt-link-active 类来设置活动导航项上的图像样式，而不是使用nav-link 将其应用于所有导航项。

使用 Nuxt.js 时默认应用 nuxt-link-active。您甚至可以设置自定义 CSS 类以应用于活动导航。您可以在文档here 中阅读更多相关信息。