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官網有更好的處理方法。
以上這篇vue2.0路由切換后頁面滾動位置不變BUG的解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue elementUI el-form 數據無法賦值且不報錯的問題及解決方法
vue項目中使用elementUI的el-form組件,里面有部分后端數據遍歷的字段和部分確定的字段,遇到個問題遍歷的字段可以修改值但是確定的幾個字段無法修改值,下面小編給大家分享vue elementUI el-form 數據無法賦值且不報錯的問題及解決方法,感興趣的朋友一起看看吧2023-12-12vue-loader和webpack項目配置及npm錯誤問題的解決
這篇文章主要介紹了vue-loader和webpack項目配置及npm錯誤問題的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07