Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決
更新時間：2024年03月08日 10:39:39 作者：小破孩呦
這篇文章主要介紹了Vue路由與a標簽鏈接錨點發(fā)生沖突問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue路由與a標簽鏈接錨點發(fā)生沖突
近期在vue項目中，使用了a標簽錨點定位對應內容的時候發(fā)現(xiàn)路由也發(fā)生了變化，此時如果去刷新頁面則會出現(xiàn)找不到頁面的情況。
如果直接使用下面的方法進行錨鏈接，會導致路由變成xxx，這樣顯然不是我們需要的
<a href="#xxx" rel="external nofollow" ></a> <div id="xxx"></div>
采用下面方法解決
<a @click.prevent="anchor('comment')">點擊我跳轉至comment</a>
<div id="comment">我是comment區(qū)域</div>methods: {
/*錨鏈接跳轉*/
anchor(anchorName) {
/*找到錨點*/
let anchorElement = document.getElementById(anchorName);
/*如果對應id的錨點存在，就跳轉到錨點*/
if(anchorElement) {
anchorElement.scrollIntoView();
}
}
}這樣，路由就不會發(fā)生變化了。
錨點跳轉方法二
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"
});
},
},總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家分享一篇vue實現(xiàn)tab切換外加樣式切換方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。下面這篇文章主要給大家介紹了關于利用Vue.js實現(xiàn)求職在線之職位查詢功能的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
本文主要介紹了vue3 setup點擊跳轉頁面的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
這篇文章主要介紹了實現(xiàn)elementUI表單的全局驗證的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
atom-design(Vue.js移動端組件庫)手勢組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動端組件庫)手勢組件使用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
本文主要介紹了Vue?中v-model的完整用法及原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在現(xiàn)代前端開發(fā)中,懶加載是一種提高應用性能和用戶體驗的重要技術,尤其是在處理較大圖片或長列表數據時,本文將使用 Vue 3 和其新推出的 setup 語法糖來實現(xiàn)懶加載功能,并提供具體的示例代碼,需要的朋友可以參考下2024-09-09
今天小編就為大家分享一篇vue組件開發(fā)之用戶無限添加自定義填寫表單的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了基于 Vue 的商品主圖放大鏡方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Vue中mapMutations傳遞參數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04