vue实现点击导航高亮

实现导航点击高亮的方法

在Vue中实现导航点击高亮效果，可以通过以下几种方式实现：

使用动态class绑定 通过v-bind:class或简写:class动态绑定class，根据当前选中状态切换高亮样式。

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="{ 'active': activeIndex === index }"
        @click="activeIndex = index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: ['首页', '产品', '关于', '联系'],
      activeIndex: 0
    }
  }
}
</script>

<style>
.active {
  color: #409EFF;
  background-color: #ecf5ff;
}
</style>

使用路由匹配高亮 当导航与路由关联时，可以利用路由的active-class属性实现高亮效果。

<template>
  <div>
    <router-link 
      v-for="(item, index) in navItems" 
      :key="index"
      :to="item.path"
      active-class="active"
    >
      {{ item.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { name: '首页', path: '/home' },
        { name: '产品', path: '/product' }
      ]
    }
  }
}
</script>

使用计算属性管理状态 对于复杂场景，可以使用计算属性动态判断当前激活项。

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="isActive(index)"
        @click="setActive(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navItems: ['首页', '产品', '关于', '联系'],
      activeIndex: 0
    }
  },
  methods: {
    setActive(index) {
      this.activeIndex = index
    }
  },
  computed: {
    isActive() {
      return function(index) {
        return this.activeIndex === index ? 'active' : ''
      }
    }
  }
}
</script>

使用Vuex管理状态 在大型应用中，可以使用Vuex集中管理导航状态。

// store.js
export default new Vuex.Store({
  state: {
    activeNavIndex: 0
  },
  mutations: {
    setActiveNav(state, index) {
      state.activeNavIndex = index
    }
  }
})

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="{ 'active': $store.state.activeNavIndex === index }"
        @click="$store.commit('setActiveNav', index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

样式优化建议

对于高亮效果，可以添加过渡动画提升用户体验：

li {
  transition: all 0.3s ease;
}

.active {
  transform: scale(1.05);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

以上方法可根据具体需求选择使用，路由关联的导航推荐使用router-link方案，独立组件可使用动态class绑定方式。