切換到新路由時,頁面要滾動到頂部或保持原先的滾動位置怎么做呢


vue-router 頁面切換后保持在頁面頂部而不是保持原先的滾動位置的辦法:
https://www.cnblogs.com/kugeliu/p/7172042.html

vue-router有提供一個方法scrollBehavior,它可以使切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新加載頁面那樣。

這個功能只在 HTML5 history 模式下可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }
})
{ x: number, y: number }
{ selector: string }
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
 
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

 


vue2.0路由切換后頁面跳轉后新頁面滾動位置不變BUG(滾動條回到頂部的位置):
https://blog.csdn.net/ZHIYUANfL/article/details/79241655

解決辦法很簡單,如下,直接監測watch路由變化,然后將body的滾動距離scrollTop賦值為0。

export default {
        watch:{
            '$route':function(to,from){
           document.body.scrollTop = 0;
                 document.documentElement.scrollTop = 0;
           }

        }
    }


返回到上次滾動位置:
https://blog.csdn.net/yan263364/article/details/84402595


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM