vue将导航栏封装成一个组件 导航栏的每个单元都包括一个svg图片和一段文字 默认时各单元的背景颜色为purple 当鼠标悬浮到某个单元上的时候 该单元的背景色为pink 当鼠标点击某个单元的时候 该单元的背景颜色变为red 并且点击导航栏中的每一个单元都可以跳转相对应的页面 代码详细实现

好的，我可以为您提供一个简单的实现代码，您可以根据自己的需求进行修改和优化：

<template>
  <div class="navigation">
    <ul>
      <li v-for="(item, index) in navItems" :key="index" @click="handleClick(index)" :class="{ active: activeIndex === index }" @mouseover="handleMouseOver(index)" @mouseleave="handleMouseLeave(index)">
        <div class="icon">
          <svg :class="{ active: activeIndex === index }" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <!-- 这里是 svg 图片的代码 -->
          </svg>
        </div>
        <div class="text">{{ item }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  props: {
    navItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: -1
    }
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index
      // 点击后的逻辑，可以使用 vue-router 进行页面跳转
    },
    handleMouseOver(index) {
      if (this.activeIndex !== index) {
        // 只有当该单元不是激活状态时才变成 pink 背景色
        this.$set(this.navItems, index, { text: this.navItems[index], background: 'pink' })
      }
    },
    handleMouseLeave(index) {
      if (this.activeIndex !== index) {
        // 只有当该单元不是激活状态时才变回 purple 背景色
        this.$set(this.navItems, index, { text: this.navItems[index], background: 'purple' })
      }
    }
  },
  mounted() {
    // 初始化设置每个单元的背景色为 purple
    this.navItems = this.navItems.map(item => ({ text: item, background: 'purple' }))
  }
}
</script>

<style scoped>
.navigation {
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 20px;
      padding: 10px;
      cursor: pointer;
      transition: background-color .3s;

      &.active {
        background-color: red;
      }

      &:hover {
        background-color: pink;
      }

      .icon {
        svg {
          /* 这里是 svg 图片的样式 */
        }

        &.active svg {
          /* 激活时 svg 图片的样式 */
        }
      }

      .text {
        /* 文字的样式 */
      }
    }
  }
}
</style>

这里的关键是利用 `:class` 绑定类名，根据 `activeIndex` 和 `index` 的关系来判断是否激活状态，以及利用 `@mouseover` 和 `@mouseleave` 事件来改变背景色。同时，利用 `this.$set()` 方法来改变数组中某个元素的属性，以达到改变背景色的效果。另外，点击事件可以使用 vue-router 进行页面跳转。