在vue中用:class对象的方式做高亮导航

在 Vue 中，你可以使用 `v-bind:class` 或者简写形式 `:` 来动态地为元素添加或移除 CSS 类名，实现导航栏的高亮功能。假设你有一个导航列表，每个链接对应一个路由，当当前路由匹配链接的 path 时，该链接会高亮显示。下面是一个简单的例子：

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

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/home', name: 'Home' },
        { path: '/about', name: 'About' },
        // 其他路由...
      ],
    };
  },
  computed: {
    isActive(route) {
      return this.$route.path === route.path; // 判断当前路由是否匹配
    }
  },
};
</script>

<style scoped>
.navbar ul li.active {
  color: #f00; /* 高亮颜色 */
  font-weight: bold;
}
</style>

在这个例子中：

- 使用 `v-for` 循环遍历路由数组，每个链接是 `router-link` 组件。
- `:class="{ active: isActive(route) }"` 表达式表示如果 `isActive` 返回 true，就给链接添加 `active` 类名，反之则不添加。
- `isActive` 是一个计算属性，根据当前路由 `$route.path` 是否等于目标路由的 `path` 来判断。
- 样式部分 `.navbar ul li.active` 设置了激活状态下的链接样式。

这样，每当用户访问一个新页面时，对应的导航项会自动高亮显示。