Vue路由与a标签链接锚点发生冲突问题及解决

<a href="#xxx" rel="external nofollow" ></a>
<div id="xxx"></div>

<a @click.prevent="anchor('comment')">点击我跳转至comment</a>
<div id="comment">我是comment区域</div>

methods: {
  /*锚链接跳转*/
  anchor(anchorName) {
    /*找到锚点*/
    let anchorElement = document.getElementById(anchorName);
    /*如果对应id的锚点存在，就跳转到锚点*/
    if(anchorElement) {
      anchorElement.scrollIntoView();
    }
  }
}

<!-- 第一块对比表 -->
<table1 :abnormalData="abnormalData1" id="table1"></table1>
<!-- 第二块对比表 -->
<table2 :abnormalData="abnormalData2" id="table2"></table2>
<!-- 第三块对比表 -->
<table3 :abnormalData="abnormalData3" id="table3"></table3>
<!-- 第四块对比表 -->
<table4 :abnormalData="abnormalData4" :abnormalData2="abnormalData41" id="table4"></table4>
<!-- 第五块对比表 -->
<table5 :abnormalData="abnormalData5" id="table5"></table5>
<!-- 第六块对比表 -->
<table6 :abnormalData="abnormalData6" id="table6"></table6>
<!-- 第七块对比表 -->
<table7 :abnormalData="abnormalData7" id="table7"></table7>

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table1')">导航1</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table2')">导航2</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table3')">导航3</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table4')">导航4</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table5')">导航5</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table6')">导航6</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table7')">导航7</a>

methods: {
  //模拟锚点跳转
  goAnchor(selector) {
     document.querySelector(selector).scrollIntoView({
          behavior: "smooth"
     });
  },
},