脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue路由与a标签链接锚点发生冲突

Vue路由与a标签链接锚点发生冲突问题及解决

 更新时间：2024年03月08日 10:39:39   作者：小破孩呦  
这篇文章主要介绍了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();
    }
  }
}

这样，路由就不会发生变化了。

锚点跳转方法二

1、先在需要跳转的对应板块上添加 id

<!-- 第一块对比表 -->
<table1 :abnormalData="abnormalData1" id="table1"></table1>
<!-- 第二块对比表 -->
<table2 :abnormalData="abnormalData2" id="table2"></table2>
<!-- 第三块对比表 -->
<table3 :abnormalData="abnormalData3" id="table3"></table3>
<!-- 第四块对比表 -->
<table4 :abnormalData="abnormalData4" :abnormalData2="abnormalData41" id="table4"></table4>
<!-- 第五块对比表 -->
<table5 :abnormalData="abnormalData5" id="table5"></table5>
<!-- 第六块对比表 -->
<table6 :abnormalData="abnormalData6" id="table6"></table6>
<!-- 第七块对比表 -->
<table7 :abnormalData="abnormalData7" id="table7"></table7>

2、在导航的 a 标签上添加事件

<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table1')">导航1</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table2')">导航2</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table3')">导航3</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table4')">导航4</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table5')">导航5</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table6')">导航6</a>
<a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="goAnchor('#table7')">导航7</a>

注意每一块的 id 一一对应

3、在 methods 中添加跳转的方法：

methods: {
  //模拟锚点跳转
  goAnchor(selector) {
     document.querySelector(selector).scrollIntoView({
          behavior: "smooth"
     });
  },
},

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 

您可能感兴趣的文章:

相关文章

最新评论