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

ncj393437906

于 2021-01-20 09:16:20 发布

阅读量1.3k

点赞数 3

分类专栏： Vue2

本文链接：https://blog.youkuaiyun.com/ncj393437906/article/details/112857390

版权

Vue2 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了Vue项目中使用锚点链接时如何避免路由变化导致的页面丢失问题，通过实例展示了如何利用click.prevent和JavaScript锚点定位技术来实现无刷新跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期在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()
      }
    }
  }