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中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
基于vue3和element plus實現(xiàn)甘特圖
甘特圖是一種重要的項目管理工具,它可以通過圖形化的方式展示項目的進度和時間表,甘特圖通常由一個橫軸和一個縱軸組成,甘特圖對于項目管理非常重要,所以本文給大家介紹了如何基于vue3和element plus實現(xiàn)甘特圖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Vue-cli3生成的Vue項目加載Mxgraph方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
今天小編就為大家分享一篇解決Vue在Tomcat8下部署頁面不加載的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
網(wǎng)上大部分關于Nuxt打包部署教程可謂是可以用五花八門來形容,這對于第一次接觸的朋友簡直是無從下手,這篇文章主要給大家介紹了關于Nuxt3+ElementPlus構建打包部署的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue中mock數(shù)據(jù),模擬后臺接口實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)井字棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了vue3中setup語法糖下通用的分頁插件,實例代碼介紹了自定義分頁插件：PagePlugin.vue，文中提到了vue3中setup語法糖下父子組件之間的通信，需要的朋友可以參考下2022-10-10
vue中el-table多級嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級嵌套列表(菜單使用el-switch代替)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
vue的ui組件庫很多種，但是這么多的組件庫也不能滿足我們的開發(fā)需求，所以需要我們根據(jù)自己需求自己寫一個插件，下文小編通過兩個栗子給大家介紹js自定義組件的方法，感興趣的朋友一起看看吧2018-03-03