Vue.js中如何实现侧边栏菜单点击时切换激活状态

问题原因 #

你当前硬编码给第一个菜单项固定添加了active类，没有和选中状态做动态绑定，所以点击其他菜单项时该类不会自动移除。

实现方案 #

方案1：搭配vue-router自动激活（推荐） #

你已经在使用vue-router，它自带路由匹配激活类，无需手动管理状态：

1. 将所有普通<a>标签菜单统一改为<router-link>，移除硬写的active类
2. 直接复用路由自动添加的router-link-exact-active类和你的激活样式绑定即可

修改后的模板代码如下：

<div id="mobile_sidebar_display">
  <div
    class="logo_section d-flex justify-content-center align-items-center"
  >
    <a v-on:click="closeSideDrawer" :href="base + '/'">
      <img src="../../assets/images/logo_2.svg" class="w-100" />
    </a>
  </div>
  <div style="height: 10px"></div>
  <!-- 首页菜单改为router-link，exact用于精确匹配根路由 -->
  <router-link
    v-on:click="closeSideDrawer"
    class="sidebar_link"
    :to="base + '/'"
    exact
    ><i class="fas fa-home"></i> <span class="ml-2">Home</span></router-link
  >

  <router-link v-on:click="closeSideDrawer" class="sidebar_link" to="/courses"
    ><i class="far fa-user"></i> <span class="ml-2">Courses</span></router-link
  >
  <router-link class="sidebar_link" to="/QuizGrid"
    ><i class="fas fa-puzzle-piece"></i>
    <span v-on:click="closeSideDrawer" class="ml-2"
      >Puzzles</span
    ></router-link
  >
</div>

然后在CSS中修改激活样式的选择器即可：

/* 原来的.sidebar_link.active改成下面的写法 */
.sidebar_link.router-link-exact-active {
  /* 你原来的激活样式，比如高亮色、下划线等 */
}

方案2：手动管理激活状态 #

如果需要自定义控制逻辑，可以用响应式变量管理激活项：

1. 在组件data中添加activeMenu变量，默认值设为首页标识
2. 点击菜单项时更新该变量
3. 用动态class绑定判断是否添加active类

script部分代码：

export default {
  data() {
    return {
      // 默认激活首页
      activeMenu: 'home'
    }
  },
  methods: {
    // 新增更新激活菜单的方法
    setActiveMenu(menuKey) {
      this.activeMenu = menuKey
      this.closeSideDrawer()
    },
    closeSideDrawer() {
      // 你原来的关闭侧边栏逻辑
    }
  }
}

模板部分修改：

<div id="mobile_sidebar_display">
  <div
    class="logo_section d-flex justify-content-center align-items-center"
  >
    <a v-on:click="closeSideDrawer" :href="base + '/'">
      <img src="../../assets/images/logo_2.svg" class="w-100" />
    </a>
  </div>
  <div style="height: 10px"></div>
  <a
    v-on:click="setActiveMenu('home')"
    :class="['sidebar_link', activeMenu === 'home' ? 'active' : '']"
    :href="base + '/'">
    <i class="fas fa-home"></i> <span class="ml-2">Home</span>
  </a>

  <a 
    v-on:click="setActiveMenu('courses')" 
    :class="['sidebar_link', activeMenu === 'courses' ? 'active' : '']"
    href="#">
    <i class="far fa-user"></i> <span class="ml-2">Courses</span>
  </a>
  <router-link 
    :class="['sidebar_link', activeMenu === 'puzzles' ? 'active' : '']"
    to="/QuizGrid"
    v-on:click="setActiveMenu('puzzles')">
    <i class="fas fa-puzzle-piece"></i>
    <span class="ml-2">Puzzles</span>
  </router-link>
</div>

内容的提问来源于stack exchange，提问作者alprazolam