vue的鼠标滚动切换路由（页面）事件

1、在vue项目开发中，有时候会遇到一个页面高度只有一个屏幕的高（甚至还不到），但这是就要实现鼠标的滚轮向前或向后滚动就切换路由即切换页面这个功能。
实现步骤：
一：给页面添加鼠标的滚动事件，

			//做鼠标滚轮事件的兼容
            // chrome and ie（谷歌和IE）
            window.addEventListener('mousewheel',this.handleScroll,false)
            // firefox（火狐）
            window.addEventListener("DOMMouseScroll",this.handleScroll,false)

这里火狐浏览器还有问题，暂时还没有解决，谷歌其他的正常。
二、在methods里写方法handleScroll

 handleScroll(e){
                //用来判断滚轮是向上滑动还是向下
                let direction = e.deltaY>0?'down':'up' 
                // console.log(direction)
                let arrList=this.navList
                //鼠标滚轮向下或后
                if(direction=='down'){
                    if(this.changeActive<arrList.length-1){
                        //选项卡激活的样式
                        this.changeActive=this.changeActive+1 
                        //跟随着选项卡而切换，以changeActive作为下标实现路由的path的读取
                        this.$router.push({path:arrList[this.changeActive].index})
                    }
                }else{//向上或前
                    if(this.changeActive>0){
                        this.changeActive=this.changeActive-1
                        this.$router.push({path:arrList[this.changeActive].index})
                    }
                }
            }

在这里路由的数组，注意我是根据激活选项卡的下标来进行路由的跳转判断，所以changeActive初始值要跟路由数组的第一个开始下标要一致，最好为0，连id也是从0开始，契合数组的特性