首先vue提供history模式，在此模式下有实现的方法，但history 模式对于项目放在非根域名地址下是会有很多需要调试配置路径的问题，这里主要不用history模式实现
首先当然要用到vue 中的keep-alive；keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM;
在路由配置页面中，给需要保留状态的路由地址配置keep alive：true
{
path: '/home',
component: Home,
meta: {
title: 'home',
keepAlive: true
}
},
OK 然后在app.vue页面中给用到keep-alive的路由页面<router-view></router-view>加keep-alive标签：
<div id="app">
<keep-alive>
<router-view v-if="$router.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-id="!$router.meta.keepAlive"></router-view>
</div>
我的列表页使用了vue-scroller实现上拉加载下拉刷新，因此记住位置也用到了此插件的部分功能，但思路不限于此插件
然后在需要记住位置的页面用上另两个大名鼎鼎的功能beforeRouteEnter和beforeRouteLeave，先贴代码：
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/' || from.path == '/screen' || from.path == '/area-select' || from.path == '/citySearch'){//当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next(vm => {
vm.fetchData()
});
}else{
next(vm => {
if(vm && vm.$refs.my_scroller){//通过vm实例访问this
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
setTimeout(function () {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
},0)//同步转异步操作tTime
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next()
},
这两个方法不需要放在任何生命周期中
在beforeRouteEnter中如果要设置从某个页面进入或者回来当前页面要重新刷新获取新数据时，可以按上述if语句加入页面的路由地址；
注意在beforeRouteEnter中不能用this做指向，要用vm;
这里的答题思路就是在beforeRouteLeave时把当前页面的滚动位置记录在sessionStorage中，然后回来时在beforeRouteEnter时获取sessionStorage中的滚动位置
网友评论