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

基础概念

VueJS 是一个用于构建用户界面的渐进式JavaScript框架。它允许开发者通过声明式渲染、组件系统、响应式数据绑定等特性，高效地构建复杂的单页应用（SPA）。

在VueJS中，为侧栏链接添加活动类（通常用于高亮显示当前激活的链接）是一个常见的需求。这可以通过Vue的响应式系统和条件渲染来实现。

类型

在VueJS中，为侧栏链接添加活动类通常涉及以下几种类型的方法：

使用v-bind:class指令：根据条件动态绑定CSS类。
使用计算属性：根据组件的状态计算出一个类名。
使用路由守卫（如果使用Vue Router）：在路由变化时动态添加或移除活动类。

应用场景

这种技术通常应用于需要高亮显示当前页面或导航项的网站或应用，如：

导航菜单
侧边栏
选项卡

示例代码

以下是一个使用Vue 3语法的示例，展示如何根据当前路由动态添加活动类到侧栏链接：

<template>
  <div>
    <ul>
      <li v-for="route in routes" :key="route.path">
        <router-link
          :to="route.path"
          :class="{ active: isActive(route.path) }"
        >
          {{ route.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const routes = ref([
      { path: '/', name: 'Home' },
      { path: '/about', name: 'About' },
      // ...其他路由
    ]);

    const isActive = (path) => {
      return route.path === path;
    };

    return { routes, isActive };
  }
};
</script>

<style>
.active {
  color: red; /* 活动链接的样式 */
}
</style>