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

<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>