当在vue项目中使用滚动监听时,页面跳转后,报错Uncaught TypeError: Cannot read property ‘offsetTop‘ of undefined at VueComp

导读:本篇文章讲解 当在vue项目中使用滚动监听时,页面跳转后,报错Uncaught TypeError: Cannot read property ‘offsetTop‘ of undefined at VueComp,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

vue生命周期钩子函数mounted,beforeDestroy

offsetTop of undefined 这个错误,是因为我在mounted页面加载的时,通过addEventListener给window添加了scroll滚动事件。当页面跳转后,没有自动销毁scroll的监听事件,所以会报错,但不影响功能。要避免这样的报错,我们就需要手动在beforeDestroy销毁阶段来销毁这个滚动监听事件就不会报错了。

如下代码:

        mounted() {   //加载阶段创建scroll监听事件
            window.addEventListener("scroll", this.menu);
        },
        beforeDestroy() {    //在加载时添加了scroll监听,如果不销毁,到下一个页面时,没有主动销毁,会报错'offsetTop' of undefined。因此,需要在页面跳转前销毁此监听
            window.removeEventListener("scroll", this.menu)
        },
        methods: {
            //滚动条监听
            menu() {
                let visionTitleOffsetTop = this.$refs.visionTitle.offsetTop;
                let visionTitle = this.$refs.visionTitle.classList;
                ..........
            }
        }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/66310.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!