Vue路由与a标签链接锚点发生冲突问题及解决
作者：小破孩呦
这篇文章主要介绍了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"
});
},
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。