記錄一下本次項目我使用的方法，有更簡單便捷的方法，歡迎交流

描述： 假設有a b c 頁面

從a頁面 到 b頁面 ，b頁面到c頁面 b到c頁面的時候需要記錄當前b的瀏覽位置，c返回到b的時候滾動到上次瀏覽的位置 b在返回a的時候，在從a進入b 返回的是b的頂部（也就是不記錄瀏覽位置）

做法： 使用到了vuex ，beforeRouteLeave

1.首先在vuex中state定義一個變量來記錄當前的瀏覽的位置

//state中定義數據 state: { carrerTouScroll: { height: ’’ //滾動的距離 } } //mutations 操作state數據 mutations: { setCarrerTouScroll (state, disdance) { //管理賽事 滾動距離 state.carrerTouScroll.height = disdance }, } //使用getters 有的不加這句也可以，但是有時候不加就不行，所以還是加上吧 getters: { getCarrerTou: state => state.carrerTouScroll }

2.在需要的頁面中 我使用了beforeRouteLeave 來記錄沒有路由離開的時候當前瀏覽的位置

beforeRouteLeave (to, from, next) { // 離開路由前 let that = this if (to.meta.touFlag) { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.$store.commit(’setCarrerTouScroll’, scrollTop) } else { this.$store.commit(’setCarrerTouScroll’, 0) } next() },

其中to.meta.touFlag 是我自己定義的，因為需要記錄的頁面很多，我覺的這樣比較方便，只需要在route 頁面加一個參數就好了

{ path: ’/careerAddMainTeam’, name: ’CareerAddMainTeam’, component: CareerAddMainTeam, meta: { touFlag: true } },

當然你也可以使用to.name ，如果需要跳轉頁面不多的話

beforeRouteLeave (to, from, next) { // 離開路由前 let that = this if (to.name === ’CareerAddMainTeam’) { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.$store.commit(’setCarrerTouScroll’, scrollTop) } else { this.$store.commit(’setCarrerTouScroll’, 0) } next() },

3.最后一步就是在每次b頁面獲取完數據的時候使用$nextTick,讓頁面恢復到上次瀏覽的位置

this.$nextTick(() => { this.scrollTop = this.$store.state.carrerTouScroll.height document.documentElement.scrollTop = this.scrollTop })

一定要在b頁面獲取完數據后使用nextTick，不然是沒有效果的

這次就記錄到這，如果有別的好方法，請指出

到此這篇關于vue 移動端記錄頁面瀏覽位置的方法的文章就介紹到這了,更多相關vue 移動端頁面瀏覽位置內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！