溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何解決vue2.0路由切換后頁面滾動位置不變BUG的問題”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何解決vue2.0路由切換后頁面滾動位置不變BUG的問題”這篇文章吧。
最近項目中遇到這樣一個問題，vue切換路由，頁面到頂端的滾動距離仍會保持不變。
<a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即試用</a> <router-link class="db" to="/user">個人中心</router-link>
useRightNow(){
if(判斷用戶存在){
this.$router.push('/user')
}else{
this.$router.push("/login")
}
}解決辦法很簡單，如下，直接監測watch路由變化，然后將body的滾動距離scrollTop賦值為0。
export default {
watch:{
'$route':function(to,from){
document.body.scrollTop = 0；
document.documentElement.scrollTop = 0;
}
}
}補充： hash模式下才會導致上述問題，history模式下vue官網有更好的處理方法。
以上是“如何解決vue2.0路由切換后頁面滾動位置不變BUG的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
