Vue.js项目侧边栏如何为当前路由对应的li添加active类

实现步骤 #

Vue Router 自带路由匹配自动激活的能力，直接调整代码即可实现需求：

1. 利用router-link原生属性配置激活类 #

<router-link>默认会给匹配到当前路由的元素添加router-link-active类，你可以直接指定它的激活类为你需要的active：

• 给所有<router-link>添加active-class="active"属性
• 首页路由to="/"需要额外添加exact属性，避免模糊匹配导致所有路由下首页都被激活

2. 父级菜单联动高亮&展开（可选） #

如果需要子路由激活时，父级的树菜单也自动展开、父级导航也高亮，可以通过$route.path做动态类绑定。

修改后的完整代码如下：

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
  <!-- Add icons to the links using the .nav-icon class
      with font-awesome or any other icon font library -->
  <!-- 父菜单动态绑定menu-open和active类：判断当前路由是否是子菜单下的路径 -->
  <li class="nav-item has-treeview" 
      :class="{'menu-open': ['/', '/profile', '/about'].includes($route.path), 'active': ['/', '/profile', '/about'].includes($route.path)}"
      style="direction:rtl;text-align:right">
    <a href="#" class="nav-link" :class="{'active': ['/', '/profile', '/about'].includes($route.path)}">
      <i class="nav-icon fas fa-tachometer-alt ml-2"></i>
      <p>
        لینک ها
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <router-link to="/" class="nav-link" active-class="active" exact>
          <i class="far fa-circle nav-icon"></i>
          <p>صفحه اصلی</p>
        </router-link>
      </li>
      <li class="nav-item">
        <router-link to="/profile" class="nav-link" active-class="active">
          <i class="far fa-circle nav-icon"></i>
          <p>پروفایل</p>
        </router-link>
      </li>
      <li class="nav-item">
        <router-link to="/about" class="nav-link" active-class="active">
          <i class="far fa-circle nav-icon"></i>
          <p>صفحه تستی</p>
        </router-link>
      </li>
    </ul>
  </li>
</ul>

全局配置优化（可选） #

如果你项目里所有router-link的激活类都是active，可以直接在路由实例配置里统一设置，不需要每个标签都加active-class：

// router/index.js 路由配置文件
const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  linkActiveClass: 'active', // 全局配置激活类
  linkExactActiveClass: 'exact-active' // 精确匹配的激活类，可选
})

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