When caching a page with keep-alive, another page will execute the method of the previous page?

I click an item from the list to enter the details, and I will re-request the data when I return to the page, so I use keep-alive to cache the page and find that the scroll to the address I wrote on the list page will load more to the details page.
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)
},
Vue.js
Aug.03,2021

not only do you keep listening when you keep-alive , the listening events of document are exactly independent of vue items, and will always exist if you don't destroy them.

you can drop events you have previously listened to in the vue hook function: beforeDestroy or destroy hook remove . 

destroy () { // beforeDestroy
    document.body.removeEventListener('onscroll', this.scroll) // 
}

if the project uses the keep-alive cache, you can try to call the function that removes the listener when the hook deactivated dynamic component is destroyed. Similarly, there is the hook activated , and the official document stamps this: keep-alive

. 
deactivated () {
    document.body.removeEventListener('onscroll', this.scroll) // 
}

I have this problem, too. Have you solved this problem 

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 () {
    // 
  }
}

have you solved it

?

Previous: [JAVA rookie] asked a question about access rights, and the writing interface encountered an error

Next: In vue, a two-tier loop implements a list that shows how to write

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu