vue2.0路由切換后頁面滾動位置不變BUG的解決方法
更新時間：2018年03月14日 10:10:59 作者：親愛的混蛋
下面小編就為大家分享一篇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")
}
}
解決辦法很簡單，如下，直接監(jiān)測watch路由變化，然后將body的滾動距離scrollTop賦值為0。
export default {
watch:{
'$route':function(to,from){
document.body.scrollTop = 0；
document.documentElement.scrollTop = 0;
}
}
}
補充： hash模式下才會導致上述問題，history模式下vue官網(wǎng)有更好的處理方法。
以上這篇vue2.0路由切換后頁面滾動位置不變BUG的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)5
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了vue學習筆記之slot插槽用法,結(jié)合實例形式對比分析了vue使用slot插槽的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-02-02
elementUI動態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
本篇文章主要介紹了VueJS事件處理器v-on的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本篇文章主要介紹了vuex2.0 之 modules,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
KeepAlive 是 vue 中的內(nèi)置組件，當多個組件動態(tài)切換時可以對實例狀態(tài)進行緩存，本文就來詳細的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實例詳解,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)紅包雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07