我的项目是有一个带有滚动条的列表数据,当滚动条滑动好几页之后点击其中一条数据进入详情页之后,在详情页有返回按钮,返回的时候希望还在当前位置,而不是重置到顶部,对用户体验及其不好,试了好多种方法,最终也是实现啦,话不多说看代码吧
一… 首先为需要保留滚动条的组件开启缓存,在 router.js 中写上如下代码:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: shenpi
},
{
path: '/submit',
name: 'submit',
component: submit,
meta: {
requireAuth: true
},
},
{
path: '/error',
name: 'error',
component: error
}
]
})
二… 在App.vue文件中给组件开启缓存,使用keep-alive
我这是利用include实现的部分页面开启缓存,在data里定义一个数组,把想要缓存的页面放在数组里
<template>
<div id="app">
<keep-alive :include="include"> <router-view /></keep-alive>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
include:["/submit","/approval","/copy"]
};
},
};
</script>
二… 也可以在app.vue文件中给开启缓存的组件和没有开启的做区分,可以这样写(任选一种即可)
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.requireAuth"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.requireAuth"></router-view>
</div>
</template>
三… 在需要缓存滚动条的组件页面加入下面的代码:
export default {
//这个name名字要写,与路由的名字保持一致
name: "/submit",
data() {
return {};
},
beforeRouteLeave(to, from, next) {
this.scrollTop = document.querySelector(".main").scrollTop;
//保存滚动条元素div的scrollTop值
next();
},
beforeRouteEnter(to, from, next) {
next(vm => {
document.querySelector(".main").scrollTop = vm.scrollTop;
// 为div元素重新设置保存的scrollTop值
});
},
}