个人blog，欢迎关注加收藏

vue-router失效

项目：H5绣红旗

框架：vue + vue-router

***查看是否代码中存在路由钩子函数,而钩子函数中未写next()***;

• 部分路由跳转有效：

  p_demo.addEventListener("touchend", function (e){            /*触摸结束*/
              console.log("触摸结束")
              // console.log(e)
              _this.num = _this.start - _this.move ;   /*得出开始和结束距离页面顶部的差值*/
              console.log(_this.num)     /*得出触屏结束后距离页面顶部的距离*/
              if(_this.num>15){
                  console.log('跳转到下一页');
                  _this.$router.push({//跳转到热力图页：    跳转有效
                      'path':'/statistics'
                  });
                  
              }else{//首页 往上不跳转
                  console.log('不跳转');
              }
  
      })
  

  • 部分路由跳转失效：

  p_demo.addEventListener("touchend", function (e){            /*触摸结束*/
              console.log("触摸结束")
              // console.log(e)
              _this.num = _this.start - _this.move ;   /*得出开始和结束距离页面顶部的差值*/
              console.log(_this.num)     /*得出触屏结束后距离页面顶部的距离*/
              if(_this.num>15){
                  console.log('下一页','>15');
                  _this.$router.push({//跳转到首页：只写这个跳转失效，包括浏览器的后退按钮也失效，需要重新刷新整个项目
                      'path':'/'
                  });
              }else{//往上
                  console.log('上一页','<=15');
                  _this.$router.push({//跳转到首页：只写这个跳转失效，包括浏览器的后退按钮也失效，需要重新刷新整个项目
                      'path':'/'
                  });
              }
  
      })
  

  beforeRouteLeave(to,from,next){
    console.log('离开路由');
  	next();//注意！！！使用路由钩子函数时，一定要要加上next()函数，让路由跳转到下个路由，否则路由跳转失效
  
  }