vue 切换“页面”(路由)时保持滚动条回到顶部

vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置,这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的。
解决办法是在切换路由的时候,将滚动条复位为0。
由于是vue+webpack项目,找到入口切换路由的页面App.vue文件下,添加watch事件,全局监听路由。

  // 使用watch 监听$router的变化,
  watch: {
    '$route': function(to,from){
     document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章