Vue.js VueJS将活动类添加到侧栏链接

我有一个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"
            alt="User Image"
          />
        </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="/vpnconnect" class="nav-item has-treeview">
            <a class="nav-link" id="vpnconnect_tab">
              <i class="sidebar-icons">vpn_lock</i>
              <p class="sidebar-links">VPN 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>

仪表板
仪表板

云端队列
云连接
装置
活动客户端
公众的
互联网接入

无线网络
Wi-Fi设置

帐户树
局域网设置

人民
客人访问

锁
VPN连接
闪现
PoE管理

以太网设置
转发
安全
安全性
系统\u更新\u替换
软件更新

设置
系统设置

洗牌
诊断

---

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

您需要定义路由器活动链接类来设置活动链接元素的样式。您可以在全局css中定义它，也可以在组件内部的样式标记下定义它。例如：

.路由器链路处于活动状态{
背景色：#000；
填充：2rem；
}

您使用的是哪种css框架？我的css文件不使用任何框架。谢谢，我将尝试使用此框架并让您知道！你能试试吗？如果你能接受我的答案，如果它对你有用，我将不胜感激。：）