vue header跟随左侧导航切换

如果你想实现一个 Vue 的 header 跟随左侧导航切换的功能，可以考虑以下步骤：

1. 在你的 Vue 组件中，添加一个 `isNavActive` 的状态变量，用于存储当前左侧导航栏选中项的索引值。

2. 在左侧导航栏组件中，当用户点击某一项时，触发一个事件，在事件中将 `isNavActive` 更新为当前点击项的索引值。

3. 在 header 组件中，使用 `computed` 计算属性，根据 `isNavActive` 的值来动态设置 header 的内容。

下面是一个示例代码：

<template>
  <div>
    <nav>
      <ul>
        <li v-for="(item, index) in navList" :key="index" @click="handleNavClick(index)">
          {{ item }}
        </li>
      </ul>
    </nav>
    <header>
      <h1>{{ activeItem }}</h1>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: ['Home', 'About', 'Contact'],
      isNavActive: 0 // 默认选中第一项
    }
  },
  methods: {
    handleNavClick(index) {
      this.isNavActive = index
    }
  },
  computed: {
    activeItem() {
      return this.navList[this.isNavActive]
    }
  }
}
</script>

在上述代码中，我们通过 `handleNavClick` 方法来处理左侧导航栏的点击事件，在事件中更新 `isNavActive` 变量的值。然后通过 `activeItem` 计算属性来根据 `isNavActive` 的值动态获取当前选中项的文本内容，并将其渲染到 header 中。