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();
    }
  }
}
相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端