記錄一下本次項(xiàng)目我使用的方法，有更簡(jiǎn)單便捷的方法，歡迎交流

描述： 假設(shè)有a b c 頁面

從a頁面 到 b頁面 ，b頁面到c頁面

b到c頁面的時(shí)候需要記錄當(dāng)前b的瀏覽位置，c返回到b的時(shí)候滾動(dòng)到上次瀏覽的位置

b在返回a的時(shí)候，在從a進(jìn)入b 返回的是b的頂部(也就是不記錄瀏覽位置)

做法： 使用到了vuex ，beforeRouteLeave

1.首先在vuex中state定義一個(gè)變量來記錄當(dāng)前的瀏覽的位置

//state中定義數(shù)據(jù)

state: {

carrerTouScroll: {

height: '' //滾動(dòng)的距離

}

}

//mutations 操作state數(shù)據(jù)

mutations: {

setCarrerTouScroll (state, disdance) { //管理賽事 滾動(dòng)距離

state.carrerTouScroll.height = disdance

},

}

//使用getters 有的不加這句也可以，但是有時(shí)候不加就不行，所以還是加上吧

getters: {

getCarrerTou: state => state.carrerTouScroll

}

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

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 是我自己定義的，因?yàn)樾枰涗浀捻撁婧芏?#xff0c;我覺的這樣比較方便，只需要在route 頁面加一個(gè)參數(shù)就好了

{

path: '/careerAddMainTeam',

name: 'CareerAddMainTeam',

component: CareerAddMainTeam,

meta: {

touFlag: true

}

},

當(dāng)然你也可以使用to.name ，如果需要跳轉(zhuǎn)頁面不多的話

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頁面獲取完數(shù)據(jù)的時(shí)候使用$nextTick,讓頁面恢復(fù)到上次瀏覽的位置

this.$nextTick(() => {

this.scrollTop = this.$store.state.carrerTouScroll.height

document.documentElement.scrollTop = this.scrollTop

})

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

這次就記錄到這，如果有別的好方法，請(qǐng)指出

到此這篇關(guān)于vue 移動(dòng)端記錄頁面瀏覽位置的方法的文章就介紹到這了,更多相關(guān)vue 移動(dòng)端頁面瀏覽位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的vue 商城浏览足迹_vue 移动端记录页面浏览位置的方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。