vue实现导航栏切换功能

Vue实现导航栏切换功能，可以通过以下步骤：

1. 创建一个导航栏组件，包含多个导航链接。

2. 在导航栏组件中定义一个变量`activeIndex`，表示当前选中的导航链接的索引。

3. 定义一个点击导航链接的方法`handleClick`，在方法中修改`activeIndex`的值为当前链接的索引。

4. 在导航链接的标签上绑定点击事件，并调用`handleClick`方法。

5. 在组件中使用条件渲染，根据`activeIndex`的值显示或隐藏不同的内容。

以下是一个简单的实现代码示例：

<template>
  <div>
    <nav>
      <a href="#" @click="handleClick(0)" :class="{ active: activeIndex === 0 }">首页</a>
      <a href="#" @click="handleClick(1)" :class="{ active: activeIndex === 1 }">关于我们</a>
      <a href="#" @click="handleClick(2)" :class="{ active: activeIndex === 2 }">联系我们</a>
    </nav>
    <div v-if="activeIndex === 0">这是首页内容</div>
    <div v-if="activeIndex === 1">这是关于我们内容</div>
    <div v-if="activeIndex === 2">这是联系我们内容</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: 0
      }
    },
    methods: {
      handleClick(index) {
        this.activeIndex = index
      }
    }
  }
</script>

<style>
  .active {
    color: red;
  }
</style>

注意：上述示例中使用了条件渲染的方式展示不同的内容。如果需要展示的内容较多，可以考虑使用`<router-view>`和Vue Router实现页面路由。