1. 布局

<!-- 左侧目录 -->
      <ul class="left-nav">
        <li
          v-for="(item, index) in navList"
          :key="index"
          @click="navClick(index)"
          :class="{'active':index == activeIndex}"
        >
          <span>{{ item.navName}}</span>
        </li>
      </ul>

内容dom增加ref="indexcatch" 

<!-- 右侧内容区域 -->
<div v-for="(item, index) in segList" :key="index" ref="indexcatch">
    <div class="seg">
        {{item.content}}
    </div>
</div>

2. 增加监听滚动事件，右侧滚动时，左侧导航对应的index高亮，实现联动效果。

mounted() {
    window.addEventListener("scroll", this.scrollFun);
}

methods: {
    scrollFun() {
      this.divs = this.$refs.indexcatch
      let scollTop = document.documentElement.scrollTop
      let aIndex = 0;
      if (scollTop + document.documentElement.clientHeight === document.body.scrollHeight)                                                   
      {
        this.activeIndex = this.navList.length - 1
      } else {
        for (let i = 0; i < this.divs.length; i++) {
          if (this.divs[i].offsetTop - scollTop === 0) {
            aIndex = i
          } else if (this.divs[i].offsetTop - scollTop <= 50) {
            aIndex = i
          }
        }
        this.activeIndex = aIndex;
      }
      if (scollTop === 0) {
        this.activeIndex = 0
      }
    }
}

3. 左侧导航的点击事件

这里要注意点击之后，跳转对应区域的同时，自然也触发了scroll事件，需要加一个定时器。

    navClick(i) {
      window.removeEventListener('scroll', this.scrollFun)
      clearTimeout(timer)
      this.activeIndex = i
      scrollTo({
        left: 0,
        top: this.$refs.indexcatch[i].offsetTop - 30
      });
      timer = setTimeout(() => {
        window.addEventListener("scroll", this.scrollFun)
      }, 1000)
    }

以上。

祝大家所有的bug都能解决！