vue keep-alive

邮差的信 提交于 2021-01-31 01:02:57
//父页面
<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);
        }

  

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!