在Vue中，当从商品详细页pageTwo返回列表页pageOne时，需要保持之前滚动位置并避免重新加载数据。通过在beforeRouteEnter钩子中判断路由来源，利用`keep-alive`组件或`$route.meta`来记录和恢复滚动位置，并决定是否调用数据请求方法。此外，还可以使用vuex、cookie等方法实现相同效果。
业务需求：pageOne页面是一个商品列表页面，在这个页面点击商品，就会跳转到pageTwo商品详细页面。此时再从pageTwo页面返回到pageOne页面时，pageOne页面需要做到：1.记录pageOne之前的滚动的距离。2.不重新请求数据。而从其它页面进入到pageOne页面时，pageOne页面不需要记录之前的滚动距离和需要重新请求数据。
1.使用keep-alive组件的实现方法
App.vue
page-one.vue
测试
export default {
name: '',
data () {
return {
scroll: 0
}
},
beforeRouteEnter (to, from, next) {
if (from.name === 'pageTwo') {
next(vm => {
const pageOneContainer = vm.$refs.pageOneContainer
// 记录滚动高度
pageOneContainer.scrollTop = vm.scroll
// 不重新请求数据
vm.notFetchData()
})
} else {
next(vm => {
const pageOneContainer = vm.$refs.pageOneContainer
// 不记录滚动高度
pageOneContainer.scrollTop = 0
// 重新请求数据
vm.fetchData()
})
}
},
beforeRouteLeave (to, from, next) {
if (to.name === 'pageTwo') {
const pageOneContainer = this.$refs.pageOneContainer
this.scroll = pageOneContainer.scrollTop
}
next()
},
methods: {
fetchData () {
console.log('need flash')
},
notFetchData () {
console.log('do not need flash')
}
}
}
.page-one {
height: 100px;
background-color: #ccc;
overflow: auto;
}
2.不使用keep-alive组件的实现方法
App.vue
other |
page-one |
page-two
page-one.vue
测试
export default {
name: '',
beforeRouteEnter (to, from, next) {
if (from.name === 'pageTwo') {
next(vm => {
const pageOneContainer = vm.$refs.pageOneContainer
// 记录滚动高度
pageOneContainer.scrollTop = vm.$route.meta.scroll || 0 // 从page-one路由的meta属性中获取scroll
// 不重新请求数据
vm.notFetchData()
})
} else {
next(vm => {
const pageOneContainer = vm.$refs.pageOneContainer
// 不记录滚动高度
pageOneContainer.scrollTop = 0
// 重新请求数据
vm.fetchData()
})
}
},
beforeRouteLeave (to, from, next) {
if (to.name === 'pageTwo') {
const pageOneContainer = this.$refs.pageOneContainer
// 将page-one页面的scroll记录到路由的meta中
this.$route.meta.scroll = pageOneContainer.scrollTop
}
next()
},
methods: {
fetchData () {
console.log('need flash')
},
notFetchData () {
console.log('do not need flash')
}
}
}
.page-one {
height: 100px;
background-color: #ccc;
overflow: auto;
}
效果展示：
使用keep-alive缓存组件只是为了保存page-one组件中的scroll属性，若不想缓存组件，可以有很多钟方法来记录scroll，例如上面使用的路由元信息meta、vuex、cookie、sessionStorage、localStorage等都能实现同样的效果。
扫一扫
2788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
