vue实现跨页面定位锚点区域方式

<template>
  <!-- 左边菜单区 -->
  <a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
  	<!-- 一级锚点 -->
    <a-anchor-link href="#menu1" rel="external nofollow"  title="菜单一">   
      <!-- 二级锚点 -->
      <a-anchor-link href="#menu2" rel="external nofollow"  title="菜单二" />
    </a-anchor-link>
  </a-anchor>
   <!-- 右边内容滚动区 -->
   <div id="menu1">菜单一的详细内容</div>
   <div id="menu2">菜单二的详细内容</div>
</template>
<script>
export default {
  methods: {
    // 默认高亮的锚点
    getCurrentAnchor() {
      return '#menu1';
    },
  },
};
</script>

1、 npm install --save vue-scrollto
2、 在需要使用锚点的组件中：
var VueScrollTo = require('vue-scrollto');
3、给锚点添加点击事件
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、在左菜单点击事件中，实现如下代码
点击左菜单 当前页面路由拼接 search参数（菜单对应的右边内容id）
// 2、在锚点页面，监听路由变化
监听路由变化，获取search参数，
// 3、设置document.body.scrollTop    （document 和 this.$el 都可以）
document.body.scrollTop = this.$el.querySelector('#'+search参数).scrollIntoView()
// 最终代码
 watch: {
    // 点击左菜单路由可以监听到 但是点击栏目预览  需要走mounted()
   $route(newRoute) {
     if (!newRoute.query.programId) return;
     // 点击锚点  路由监听不到
     // console.log(newRoute.params.programId,'newRoute.params.programId')
     let id = "program" + this.$route.query.programId;
     this.$nextTick(()=>{
       if(this.$el.querySelector(`#${id}`)) {
         // scrollIntoView  不能随便添加参数  建议不要加任何参数
         document.body.scrollTop = this.$el.querySelector(`#${id}`).scrollIntoView();
       }
     });
     this.saveCurrentProgramId = newRoute.query.programId;
   },
 },

// 1、在锚点页面，mounted()钩子中，获取search参数id
this.$router.query.id
监听路由变化，获取search参数，
// 2、设置document.body.scrollTop
// document 和 this.$el 都可以
document.body.scrollTop = this.$el.querySelector('#'+search参数).scrollIntoView()
// 最终代码
mounted() {
  let that = this;
  // id选择器不能以数字开头 不能包含 / 等特殊字符
  setTimeout(function() {
    if(that.$route.query.programId) {
      let id = "program" + that.$route.query.programId;
      if(that.$el.querySelector(`#${id}`)) {
        // scrollIntoView  不能随便添加参数  建议不要加任何参数
        document.body.scrollTop = that.$el.querySelector(`#${id}`).scrollIntoView();
      }
    }
  },1000)
}

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