快捷導(dǎo)航

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

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

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

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

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

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

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

采用下面方法解決

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

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

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

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

1、先在需要跳轉(zhuǎn)的對(duì)應(yīng)板塊上添加 id

<!-- 第一塊對(duì)比表 -->
<table1 :abnormalData="abnormalData1" id="table1"></table1>
<!-- 第二塊對(duì)比表 -->
<table2 :abnormalData="abnormalData2" id="table2"></table2>
<!-- 第三塊對(duì)比表 -->
<table3 :abnormalData="abnormalData3" id="table3"></table3>
<!-- 第四塊對(duì)比表 -->
<table4 :abnormalData="abnormalData4" :abnormalData2="abnormalData41" id="table4"></table4>
<!-- 第五塊對(duì)比表 -->
<table5 :abnormalData="abnormalData5" id="table5"></table5>
<!-- 第六塊對(duì)比表 -->
<table6 :abnormalData="abnormalData6" id="table6"></table6>
<!-- 第七塊對(duì)比表 -->
<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 一一對(duì)應(yīng)

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

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