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();
    }
  }
}
相关推荐
qczg_wxg1 天前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz1 天前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码1 天前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v1 天前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山1 天前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin1 天前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip1 天前
结合Worker通知应用更新
前端·javascript
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js