快捷導(dǎo)航

Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突問題及解決

更新時間：2024年03月08日 10:39:39 作者：小破孩呦

這篇文章主要介紹了Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue路由與a標(biāo)簽鏈接錨點發(fā)生沖突

近期在vue項目中，使用了a標(biāo)簽錨點定位對應(yīng)內(nèi)容的時候發(fā)現(xiàn)路由也發(fā)生了變化，此時如果去刷新頁面則會出現(xiàn)找不到頁面的情況。

如果直接使用下面的方法進(jìn)行錨鏈接，會導(dǎo)致路由變成xxx，這樣顯然不是我們需要的

<a href="#xxx" rel="external nofollow" ></a>
<div id="xxx"></div>

采用下面方法解決

<a @click.prevent="anchor('comment')">點擊我跳轉(zhuǎn)至comment</a>
<div id="comment">我是comment區(qū)域</div>

methods: {
  /*錨鏈接跳轉(zhuǎn)*/
  anchor(anchorName) {
    /*找到錨點*/
    let anchorElement = document.getElementById(anchorName);
    /*如果對應(yīng)id的錨點存在，就跳轉(zhuǎn)到錨點*/
    if(anchorElement) {
      anchorElement.scrollIntoView();
    }
  }
}

這樣，路由就不會發(fā)生變化了。

錨點跳轉(zhuǎn)方法二

1、先在需要跳轉(zhuǎn)的對應(yīng)板塊上添加 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、在導(dǎo)航的 a 標(biāo)簽上添加事件

<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')">導(dǎo)航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')">導(dǎo)航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')">導(dǎo)航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')">導(dǎo)航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')">導(dǎo)航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')">導(dǎo)航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')">導(dǎo)航7</a>

注意每一塊的 id 一一對應(yīng)

3、在 methods 中添加跳轉(zhuǎn)的方法：

methods: {
  //模擬錨點跳轉(zhuǎn)
  goAnchor(selector) {
     document.querySelector(selector).scrollIntoView({
          behavior: "smooth"
     });
  },
},