vue中a标签锚点的替代方案

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

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

<a href="#xxx"></a>
<div id="xxx"></div>

我们可以采用下面的方法解决：

<ul class="mdnav maxCon">
  <li><a @click.prevent="anchor('md1')">产品特性</a></li>
  <li><a @click.prevent="anchor('md2')">功能结构</a></li>
  <li><a @click.prevent="anchor('md3')">产品功能</a></li>
  <li><a @click.prevent="anchor('md4')">产品优势</a></li>
</ul>

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