Vue项目中在页面上添加自定义目录

1、项目需求：页面左侧网页内容太多，所以想在页面右侧添加一个自定义的目录，目录名对应左侧内容的小标题，点击目录左侧页面滚动到对应的内容。

2、给页面左侧的内容的每个小标题添加一个data-ref属性

3、等左侧文章加载完成之后，用setTimeout定时器把左侧的ref属性push进一个空的数组。

setTimeout(function(){
          $('.block-l .block').map(function(index, item){
            _this.cataloglist.push({
              'ref': $(item).data('ref'),
              'name': $(item).find('.title').text(),
              'show': true
            });
          });          
        }, 500);

4、在push完成后的数组里循环得到页面右侧的目录内容

<div class="catalog">
   <h3 class="title">目录</h3>     
   <ul class="linklist" id="menu">
      <li v-for="(item,index) in cataloglist"  @click="catalogTo(item.ref);navtab(index)">        
         <a>{{item.name}}</a>
      </li>
   </ul>   
</div>

5、然后点击某个目录时把item.ref传参进catalogTo()函数，保证左面的内容滚动到制定的位置

// 点击目录定位到对应项
    'catalogTo': function(ref) {
      if(ref === 'top'){
        $(window).scrollTop(0);
      }
      else if(this.$refs[ref] instanceof Array){
        $(window).scrollTop(this.$refs[ref][0].offsetTop);
      }
      else{
        $(window).scrollTop(this.$refs[ref].offsetTop);
      }
    },

6、注意scrollTop()和offsetTop()的用法