<template>
  <!-- 左邊菜單區(qū) -->
  <a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
  	<!-- 一級(jí)錨點(diǎn) -->
    <a-anchor-link href="#menu1" rel="external nofollow"  title="菜單一">   
      <!-- 二級(jí)錨點(diǎn) -->
      <a-anchor-link href="#menu2" rel="external nofollow"  title="菜單二" />
    </a-anchor-link>
  </a-anchor>
   <!-- 右邊內(nèi)容滾動(dòng)區(qū) -->
   <div id="menu1">菜單一的詳細(xì)內(nèi)容</div>
   <div id="menu2">菜單二的詳細(xì)內(nèi)容</div>
</template>
<script>
export default {
  methods: {
    // 默認(rèn)高亮的錨點(diǎn)
    getCurrentAnchor() {
      return '#menu1';
    },
  },
};
</script>

1、 npm install --save vue-scrollto
2、 在需要使用錨點(diǎn)的組件中：
var VueScrollTo = require('vue-scrollto');
3、給錨點(diǎn)添加點(diǎn)擊事件
var options = {
    container: '#container',
    easing: 'ease-in',
    lazy: false,
    offset: -60,
    force: true,
    cancelable: true,
    onStart: function(element) {
      // scrolling started
    },
    onDone: function(element) {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    },
    x: false,
    y: true
}
VueScrollTo.scrollTo(element, duration, options)

// 1、在左菜單點(diǎn)擊事件中，實(shí)現(xiàn)如下代碼
點(diǎn)擊左菜單 當(dāng)前頁(yè)面路由拼接 search參數(shù)（菜單對(duì)應(yīng)的右邊內(nèi)容id）
// 2、在錨點(diǎn)頁(yè)面，監(jiān)聽(tīng)路由變化
監(jiān)聽(tīng)路由變化，獲取search參數(shù)，
// 3、設(shè)置document.body.scrollTop    （document 和 this.$el 都可以）
document.body.scrollTop = this.$el.querySelector('#'+search參數(shù)).scrollIntoView()
// 最終代碼
 watch: {
    // 點(diǎn)擊左菜單路由可以監(jiān)聽(tīng)到 但是點(diǎn)擊欄目預(yù)覽  需要走mounted()
   $route(newRoute) {
     if (!newRoute.query.programId) return;
     // 點(diǎn)擊錨點(diǎn)  路由監(jiān)聽(tīng)不到
     // console.log(newRoute.params.programId,'newRoute.params.programId')
     let id = "program" + this.$route.query.programId;
     this.$nextTick(()=>{
       if(this.$el.querySelector(`#${id}`)) {
         // scrollIntoView  不能隨便添加參數(shù)  建議不要加任何參數(shù)
         document.body.scrollTop = this.$el.querySelector(`#${id}`).scrollIntoView();
       }
     });
     this.saveCurrentProgramId = newRoute.query.programId;
   },
 },

// 1、在錨點(diǎn)頁(yè)面，mounted()鉤子中，獲取search參數(shù)id
this.$router.query.id
監(jiān)聽(tīng)路由變化，獲取search參數(shù)，
// 2、設(shè)置document.body.scrollTop
// document 和 this.$el 都可以
document.body.scrollTop = this.$el.querySelector('#'+search參數(shù)).scrollIntoView()
// 最終代碼
mounted() {
  let that = this;
  // id選擇器不能以數(shù)字開(kāi)頭 不能包含 / 等特殊字符
  setTimeout(function() {
    if(that.$route.query.programId) {
      let id = "program" + that.$route.query.programId;
      if(that.$el.querySelector(`#${id}`)) {
        // scrollIntoView  不能隨便添加參數(shù)  建議不要加任何參數(shù)
        document.body.scrollTop = that.$el.querySelector(`#${id}`).scrollIntoView();
      }
    }
  },1000)
}

document.body.scrollTop = this.$el.querySelector(selector).offsetTop