Метод из другого маршрута влияет на текущий маршрут

Question

У меня 2 вида роутера - Home.vue и List.vue. Домой является индекс, а списком является другая страница.

Из дома я перехожу на страницу списка, затем у меня есть метод, который отображает 10 элементов.

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)

    }
}

Если прокрутить его вниз будет отображать 10 новых предметов. Возвращаясь к домашней странице, метод все еще работает при прокрутке. Я не знаю, почему это происходит.

Есть ли способ отключить этот метод при переходе на другой маршрут?

Answer 1

Предполагается, что вы используете прокручиваемый прослушиватель событий для window объекта, используя mounted() метод жизненного цикла, , вы должны отменить регистрацию глобального прослушивателя для window объекта:

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 */
        }
    }
};