</keep-alive>
<router-view v-if='!$a.keepAlive'/>
</div>
</template>
2、在路由⽂件router.js，给每个路由meta添加scrollTop和keepAlive
element表格横向滚动条
{
path: '/home',
name: 'home',
component: resolve => require(['@/views/home/index.vue'], resolve),
meta: {
title: '⾸页',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/classify',
name: 'classify',
component: resolve => require(['@/views/classify/index.vue'], resolve),
meta: {
title: '分类',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/shopping',
name: 'shopping',
component: resolve => require(['@/views/shopping/index.vue'], resolve),
meta: {
title: '购物车',
index: 1,
keepAlive: true,
scrollTop: 0
}
},
{
path: '/detail',
name: 'detail',
component: resolve => require(['@/views/detail/index.vue'], resolve),
meta: {
title: '详情',
index: 2,
// keepAlive: true,
// scrollTop: 0
}
},
3、然后在main.js，记录滚动条的位置
router.beforeEach((to, from, next) => {
if (a.keepAlive) {
const $wrapper = document.querySelector('.app-wrapper'); // 列表的外层容器注意到滚动的盒⼦
const scrollTop = $wrapper ? $wrapper.scrollTop : 0;
console.log('scrollTop=', scrollTop)
}
next();
});
4、最后在需要记录保留滚动条位置的地⽅获取通过activated（这个函数每次进⼊页⾯都会执⾏，只有结合使⽤keepAlive组件才有效）来获取scrollTop
activated () {
const scrollTop = this.$a.scrollTop;
const $wrapper = document.querySelector('.app-wrapper');
if (scrollTop && $wrapper) {
$wrapper.scrollTop = scrollTop;
}
},
⽐如缓存了某些页⾯也不想随之滚动，则把scrollTop置0即可；
activated() {
const $wrapper = document.querySelector(".app-wrapper");
$wrapper.scrollTop = 0;
},
注意，页⾯滚动的话，其他页⾯有滚动条的也会随之滚动，可以对其他页⾯⾥⾯处理，或者判断是否从详情页到列表页来判断是否缓存位置，如果不是，则回到顶部，但是注意路由钩⼦函数this的使⽤；
豫公网安备41160202000602
发表评论