VueJS将活动类添加到侧边栏链接

Posted 2023-02-22

【中文标题】VueJS将活动类添加到侧边栏链接

【英文标题】：VueJS adding active class to a sidebar link

【发布时间】：2021-02-22 04:02:20

【问题描述】：

我有一个 VueJS 项目，它是一个管理面板。它有 4 个不同的主要组件，页眉、页脚、容器和侧边栏。我希望在单击侧边栏链接时突出​​显示它们。假设我从侧边栏中单击了管理链接。我希望它的背景颜色有所不同。我设法做到了，但是当我单击页面中的其他位置时，突出显示的颜色消失了。我希望链接突出显示，除非我单击另一个侧边栏链接。我该怎么做？

这是我的侧边栏模板；

<template>
 <!-- Sidebar Start -->
    <div class="sidebar">
      <!-- Sidebar User Panel -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img
            src="dist/img/user2-160x160.jpg"
            class="img-circle elevation-2"
            
          />
        </div>
        <div class="info">
          <a href="#" class="d-block">Product Name</a>
        </div>
      </div>

      <!-- Sidebar Menu Start -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <router-link tag="li" to="/dashboard" class="nav-item has-treeview">
            <a class="nav-link" id="dashboard_tab">
              <i class="sidebar-icons">dashboard</i>
              <p class="sidebar-links">Dashboard</p>
            </a>
          </router-link>
          <router-link tag="li" to="/cloudconnect" class="nav-item has-treeview">
            <a class="nav-link" id="cloudconnect_tab">
              <i class="sidebar-icons">cloud_queue</i>
              <p class="sidebar-links">Cloud Connect</p>
            </a>
          </router-link>
          <router-link tag="li" to="/activeclients" class="nav-item has-treeview">
            <a class="nav-link" id="activeclients_tab">
              <i class="sidebar-icons">devices</i>
              <p class="sidebar-links">Active Clients</p>
            </a>
          </router-link>
          <router-link tag="li" to="/internetaccess" class="nav-item has-treeview">
            <a class="nav-link" id="internetaccess_tab">
              <i class="sidebar-icons">public</i>
              <p class="sidebar-links">Internet Access</p>
            </a>
          </router-link>
          <router-link tag="li" to="/wifisettings" class="nav-item has-treeview">
            <a class="nav-link" id="wifisettings_tab">
              <i class="sidebar-icons">wifi</i>
              <p class="sidebar-links">Wi-Fi Settings</p>
            </a>
          </router-link>
          <router-link tag="li" to="/lansettings" class="nav-item has-treeview">
            <a class="nav-link" id="lansettings_tab">
              <i class="sidebar-icons">account_tree</i>
              <p class="sidebar-links">LAN Settings</p>
            </a>
          </router-link>
          <router-link tag="li" to="/guestaccess" class="nav-item has-treeview">
            <a class="nav-link" id="guestaccess_tab">
              <i class="sidebar-icons">people_alt</i>
              <p class="sidebar-links">Guest Access</p>
            </a>
          </router-link>
          <router-link tag="li" to="/***connect" class="nav-item has-treeview">
            <a class="nav-link" id="***connect_tab">
              <i class="sidebar-icons">***_lock</i>
              <p class="sidebar-links">*** Connect</p>
            </a>
          </router-link>
          <router-link tag="li" to="/poemanagement" class="nav-item has-treeview">
            <a class="nav-link" id="poemanagement_tab">
              <i class="sidebar-icons">flash_on</i>
              <p class="sidebar-links">PoE Management</p>
            </a>
          </router-link>
          <router-link tag="li" to="/forwarding" class="nav-item has-treeview">
            <a class="nav-link" id="forwarding_tab">
              <i class="sidebar-icons">settings_ethernet</i>
              <p class="sidebar-links">Forwarding</p>
            </a>
          </router-link>
          <router-link tag="li" to="/security" class="nav-item has-treeview">
            <a class="nav-link" id="security_tab">
              <i class="sidebar-icons">security</i>
              <p class="sidebar-links">Security</p>
            </a>
          </router-link>
          <router-link tag="li" to="/softwareupdate" class="nav-item has-treeview">
            <a class="nav-link" id="softwareupdate_tab">
              <i class="sidebar-icons">system_update_alt</i>
              <p class="sidebar-links">Software Update</p>
            </a>
          </router-link>
          <router-link tag="li" to="/systemsettings" class="nav-item has-treeview">
            <a class="nav-link" id="systemsettings_tab">
              <i class="sidebar-icons">settings</i>
              <p class="sidebar-links">System Settings</p>
            </a>
          </router-link>
          <router-link tag="li" to="/diagnostics" class="nav-item has-treeview">
            <a class="nav-link" id="diagnostics_tab">
              <i class="sidebar-icons">shuffle</i>
              <p class="sidebar-links">Diagnostics</p>
            </a>
          </router-link>
        </ul>
      </nav>
      <!-- Sidebar Menu End -->
    </div>
    <!-- Sidebar End -->
  </aside>
</template>

当我单击一个路线链接时，该特定链接的背景变为橙色，我希望它保持橙色，直到我单击另一个侧边栏链接。但是当我单击项目中的其他位置时，橙色背景消失了。

【问题讨论】：

你用的是哪个css框架？

我的 CSS 文件没有使用任何框架

【参考方案1】：

您需要定义 router-active-link 类来设置活动链接元素的样式。您可以将其定义为全局 CSS，也可以在组件内的样式标签下定义。例如：

.router-link-active 

  background-color: #000;
  padding: 2rem;

【讨论】：

谢谢，我会试试这个，让你知道！

你能试试吗？如果您接受我的回答，如果它对您有用，我将不胜感激。 :) ***.com/help/someone-answers