完成如下导航栏。 要求： 用vue2组件 - 鼠标悬浮有交互效果 - 鼠标点击菜单后，切换下面的组件显示

可以使用Vue2组件来完成导航栏，并为其添加鼠标悬浮和点击交互效果。下面是一个示例代码：

<template>
  <div>
    <nav>
      <ul>
        <li @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1" v-for="(item, index) in menuItems" :key="index" :class="{ active: currentIndex === index }" @click="changeComponent(index)">
          {{ item }}
        </li>
      </ul>
    </nav>

    <div>
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: ['首页', '关于', '服务', '联系'],
      currentIndex: 0,
      hoverIndex: -1,
      components: [
        // 省略其他组件的定义
        // 首页组件
        {
          name: 'Home',
          component: Home,
        },
        // 关于组件
        {
          name: 'About',
          component: About,
        },
        // 服务组件
        {
          name: 'Services',
          component: Services,
        },
        // 联系组件
        {
          name: 'Contact',
          component: Contact,
        },
      ],
    };
  },
  computed: {
    currentComponent() {
      return this.components[this.currentIndex].component;
    },
  },
  methods: {
    changeComponent(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

nav ul li.active {
  color: blue;
}

nav ul li:hover {
  color: red;
}
</style>

在上面的示例中，我们使用了一个`menuItems`数组来存储导航栏的菜单项。通过`v-for`指令，我们遍历这个数组，并为每个菜单项绑定了鼠标悬浮和点击事件。

当鼠标悬浮在菜单项上时，会触发`@mouseenter`事件，并将当前的索引赋值给`hoverIndex`变量。我们可以利用这个变量来添加鼠标悬浮的交互效果。

当鼠标离开菜单项时，会触发`@mouseleave`事件，并将`hoverIndex`重置为-1，取消鼠标悬浮的效果。

当点击菜单项时，会触发`@click`事件，并调用`changeComponent(index)`方法。这个方法将当前的索引赋值给`currentIndex`变量，以切换下方组件的显示。

最后，我们使用`<component>`标签来根据`currentIndex`动态地渲染出对应的组件。

你可以根据自己的需要修改菜单项内容和组件定义部分的代码。同时，你还可以通过修改CSS样式来自定义菜单项的外观和交互效果。