Method from other route affects current route - vue.js

Question

I have to 2 router view - Home.vue and List.vue. Home is the index and list is the other page.
From home I navigate to list page, then I have a method that displays 10 items.
scrolled() {
var self = this
var pageHeight = document.documentElement.offsetHeight,
windowHeight = window.innerHeight,
scrollPosition =
window.scrollY
|| window.pageYOffset
|| document.body.scrollTop + (document
.documentElement && document.documentElement.scrollTop || 0);
if (pageHeight <= windowHeight + scrollPosition) {
// code to display data
self.currentPage = self.currentPage + 1
self.getGameHistory(self.currentPage)
}
}
If scrolled to the bottom it will display 10 new items. Going back to home page the method is still working upon scrolling. I don't why it happens.
Is there a way to disable that method upon changing to other route?

Answer 1

Assuming, you are using scrolled event listener on window object using your mounted() lifecycle method, you must de-register the global event listener on window object:
const opts = {
mounted() {
window.addEventListener('scroll', this.scrolled);
},
beforeDestroy() {
// UN-REGISTER THE GLOBAL HANDLER BEFORE COMPONENT IS DESTROYED
window.removeEventListener('scroll', this.scrolled);
},
method: {
scrolled() {
/* Your Logic */
}
}
};