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