利用keep-alive缓存页面的时候另一个页面会执行上一个页面的方法?

ywqs
  • 31

我从列表中点击某一项进入详情,在回到页面会重新请求数据 于是我用keep-alive去缓存页面,发现我在列表页写的滚动到地址加载更多到详情页也会执行该怎么解决?
index.js

{
      path: '/',
      name: 'index',
      component: index,
      meta: { keepAlive: true }
 },
{
      path: '/newinfo',
      name: 'newinfo',
      component: newinfo
},

index.vue 滚动加载的方法

loadmore(){
let that=this
if (($(window).scrollTop() + $(window).height()) >=$(document).height()-100  &&that.isbool==true) {
                that.isbool=false; 
                setTimeout(() => {
                that.more() 
                that.isbool=true; 
                }, 1000);
            } 
      },  
index.vue监听滚动 
activated(){
if (screen.width<768) {
window.addEventListener('scroll',this.loadmore)
}
}
   
在index.vue销毁滚动
deactivated(){
window.removeEventListener("scroll",this.loadmore)
},   

回复
阅读 4k
4 个回答
✓ 已被采纳

不只是你keep-alive的时候会一直保持监听,document的监听事件确切来说是独立于vue项目之外的,如果你不销毁会一直存在

你可以在vue的钩子函数中:beforeDestroy或者destroy钩子中remove掉你之前监听过的事件。

destroy () { // beforeDestroy也行
    document.body.removeEventListener('onscroll', this.scroll) // 记得移除监听
}

如果项目用了keep-alive缓存可以尝试在钩子deactivated 动态组件销毁的时候去调用移除监听的函数,类似的还有钩子activated,官方文件戳这:keep-alive

deactivated () {
    document.body.removeEventListener('onscroll', this.scroll) // 记得移除监听
}

我也遇到这个问题了 你有没有解决这个问题

methods () {
  document.body.addEventListener('onscroll', this.scroll)
},
watch: {
  $route (val) {
    if (val.path === '/') {
      document.body.addEventListener('onscroll', this.scroll)
    } else {
      document.body.removeEventListener('onscroll', this.scroll)
    }
  }
},
methods: {
  scroll () {
    // 方法
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏