您的位置:首页 > 科技 > IT业 > vue a标签锚点跳转不改变路由的方式

vue a标签锚点跳转不改变路由的方式

2025/1/1 9:05:11 来源:https://blog.csdn.net/weixin_44799030/article/details/141253452  浏览:    关键词:vue a标签锚点跳转不改变路由的方式

Vue路由与a标签链接锚点发生冲突

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

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

<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();}}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com