近期在vue项目中，使用了a标签锚点定位对应内容的时候发现路由也发生了变化，此时如果去刷新页面则会出现找不到页面的情况。

如果直接使用下面的方法进行锚链接，会导致路由变成xxx，这样显然不是我们需要的

<a href="#xxx"></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();
    }
  }
}

这样，路由就不会发生变化了。

锚点跳转方法二：

1、先在需要跳转的对应板块上添加 id

<!-- 第一块对比表 -->
<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>

2、在导航的 a 标签上添加事件

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

注意每一块的 id 一一对应

3、在 methods 中添加跳转的方法：

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