vue-router如何從詳情頁返回列表頁時返回到上次滾動位置 方法集錦

方法一：

1.在router.js裏面（即路由文件中），此時模式爲 history

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop
      }
      return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})
2.在router.js裏面需要記錄位置的單頁面裏面
let routes = [
  {
    path: '/',
    name: 'home',
    component: home,
    meta: {
      title: 'home',
      keepAlive: true
    }
  }
3.App.vue裏面<div id="app">  這樣寫的意義就是不緩存所有頁面，哪個地方寫了 keepAlive：true,哪個地方就記錄位置(加緩存)
<keep-alive >
      <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
4.位置確實記錄上了(加緩存，返回不刷新頁面)，也就是說，返回不觸發created，所以有些頁面需要返回觸發的東西都寫在activated裏面。其實整個過程很簡單，代碼也很乾練，因爲這是路由自帶的功能，只不過之前沒有發現罷了

方法二：

beforeRouteLeave(to, from, next){
  let position = window.scrollY()
  this.$store.commit('SAVE_POSITION', position) //離開路由時把位置存起來
  next()
}
在頁面中取值

updated () {
  this.$nextTick(function(){
    let position = this.$store.state.position //返回頁面取出來
    window.scroll(0, position)
  }) 
}
用updated 或者 beforeUpdate 鉤子都可以  代碼都寫在要保存滑動距離的界面
方法三：用默認的hash模式的

一個list頁點擊進入detail頁，我在這時記錄下list頁滾動條的位置，然後在detail頁返回到list頁時設置滾動條位置爲剛纔保存那個值。

// list頁route中的data鉤子
route : {
    data : function () {
        var _this = this;
        // 返回同一個位置
        var scrollTop = sessionStorage.getItem("scrollTop");
        if (scrollTop) {
            _this.$nextTick(function () {
                    $(".abuild-record-layout").scrollTop(scrollTop);
            });
        }
    }
}
$nextTick將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它，然後等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調的 this 自動綁定到調用它的實例上。

方法四：scrollBehavior方法

1.router文件中設置爲 mode: 'history', 模式

2.router設置

scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

3.詳情頁返回列表頁時， 用 history.back() 返回
--------------------- 
本文爲轉發文章，博文鏈接原文：https://blog.csdn.net/qq_40963664/article/details/79850589