在此段代码中实现导航跟随页面滚动并自动高亮显示template div class=main div class=navback div class=nav template v-for=navItem index in componentList div clickprevent=goAnchornavItemid inde

要实现导航跟随页面滚动并自动高亮显示，可以使用Vue的生命周期钩子函数和监听滚动事件来实现。

首先，在data中定义一个变量activeIndex来表示当前活动的导航项的下标，初始值为0。

然后，在mounted生命周期钩子函数中添加一个监听滚动事件的函数handleScroll。

在handleScroll函数中，首先获取导航栏的高度和滚动条距离顶部的距离。然后遍历导航项，获取每个导航项对应的锚点元素，并计算锚点元素距离顶部的距离。如果滚动条距离顶部的距离大于等于锚点元素距离顶部的距离减去导航栏的高度，说明当前滚动到了该锚点位置，将activeIndex设置为当前导航项的下标。

最后，在导航项的class绑定中，根据activeIndex是否等于当前导航项的下标，来动态添加或移除nav_active类，实现导航项的高亮显示。

修改后的代码如下所示：

<template>
  <div class="main">
    <div class="navback">
      <div class="nav">
        <template v-for="(navItem, index) in componentList">
          <div
            @click.prevent="goAnchor(navItem.id, index)"
            :key="navItem.id"
            :class="{
              nav_active: index === activeIndex,
              nav_item: navItem.nav_item,
              nav_other: navItem.nav_other
            }"
          >
            {{ navItem.name }}
          </div>
        </template>
      </div>
    </div>
    <div class="content">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...
      activeIndex: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // ...
    handleScroll() {
      const navHeight = document.querySelector('.navback').offsetHeight
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      this.componentList.forEach((navItem, index) => {
        const anchorElement = document.querySelector(navItem.id)
        const top = anchorElement.getBoundingClientRect().top + scrollTop - navHeight

        if (scrollTop >= top) {
          this.activeIndex = index
        }
      })
    }
  }
}
</script>

注意，为了在组件销毁前移除监听滚动事件的函数，需要在beforeDestroy生命周期钩子函数中调用removeEventListener方法