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

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

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

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

javascript 复制代码
<a href="#xxx" rel="external nofollow" ></a>
<div id="xxx"></div>

解决方法

javascript 复制代码
<a @click.prevent="anchor('comment')">点击我跳转至comment</a>
<div id="comment">我是comment区域</div>
javascript 复制代码
methods: {
  /*锚链接跳转*/
  anchor(anchorName) {
    /*找到锚点*/
    let anchorElement = document.getElementById(anchorName);
    /*如果对应id的锚点存在,就跳转到锚点*/
    if(anchorElement) {
      anchorElement.scrollIntoView();
    }
  }
}
相关推荐
陶甜也6 分钟前
ThreeJS曲线动画:打造炫酷3D路径运动
前端·vue·threejs
楊无好10 分钟前
react中的受控组件与非受控组件
前端·react.js
菠萝+冰12 分钟前
react虚拟滚动
前端·javascript·react.js
落一落,掉一掉24 分钟前
第十三周前端加密绕过
前端
前端初见39 分钟前
快速上手TypeScript,TS速通
javascript·ubuntu·typescript
Onlyᝰ1 小时前
前端tree树
javascript·vue.js·elementui
高德开放平台2 小时前
实战案例|借助高德开放平台实现智慧位置服务:路线导航的开发与实践
前端·后端
hemoo2 小时前
如何让echart的lengend在指定位置换行
javascript·echarts
老前端的功夫2 小时前
# HTTP缓存:从懵懵懂懂到了如指掌
前端
安卓开发者2 小时前
Docker与Nginx:现代Web部署的完美二重奏
前端·nginx·docker