vue keep-alive

最新推荐文章于 2022-11-17 23:13:44 发布

转载最新推荐文章于 2022-11-17 23:13:44 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yihuite-zch/p/10766675.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue项目中如何利用Keep-Alive组件进行页面缓存，包括如何通过路由的meta属性标记需要缓存的页面，以及如何在组件内部记录和恢复滚动条位置，确保用户体验的一致性和流畅性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//父页面
<keep-alive>
    <router-view v-if="$route.meta&&$route.meta.keepalive"></router-view>
</keep-alive>
    <router-view v-if="!($route.meta&&$route.meta.keepalive)"></router-view>

//router
router 添加meta属性和标识符
{
       path:'list',
       component: () => import('./views/staff/total_list.vue'),
       meta:{
                      keepalive:true
                  }
 }

//组件记录滚动条位置

//mounted 挂载时添加滚动事件
  this.container=document.getElementById('container');
  this.container.addEventListener('scroll', this.handleScroll);

//methods
handleScroll(){
this.scroll  =  this.container.scrollTop;
}

//activated 激活时赋值滚动条位置

 activated() {
            this.container=document.getElementById('container');
            if (this.scroll > 0) {
                this.container.scrollTo(0, this.scroll);
                this.scroll = 0;
               this.container.addEventListener('scroll', this.handleScroll);
            }
        }
//deactivated 非激活状态时 解绑滚动事件
  deactivated(){
            this.container.removeEventListener('scroll', this.handleScroll);
        }

转载于:https://www.cnblogs.com/yihuite-zch/p/10766675.html