Different components of the Vue project can be switched using the mouse

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

1. Code logic in script

//在计算属性中实时监听鼠标滑动事件handleScroll
  mounted() {
    
    
         window.addEventListener('mousewheel',this.handleScroll);
  },
  methods: {
    
    
  handleScroll(m){
    
    
      if(m.deltaY>0){
    
    
          //当鼠标往下滑时让他跳转到router中的name为BackgroundSetting页面
          this.$router.push({
    
    name:'BackgroundSetting'})
      }else{
    
    
         //当鼠标往上滑时让他跳转到router中的name为Home页面
          this.$router.push({
    
    name:'Home'})
      }
    }
  }

Done, young programmers, please don’t criticize me. I hope it is useful to everyone. If you have any questions, please leave a message.