vue中使用watch监听路由导致多次请求问题解决方法

一、错误示例1

首先想到的做法就是

直接监听，例：

watch:{
	'$route.path' (to, from) {
	      console.log(to,from)
           this.getList()
	}
},
methods:{
    getList(){}
}

但是这种方法在页面被缓存的情况下，成倍的调用watch里面的方法，多次向后端请求数据，可能会导致溢出

二，错误示例2

有了第一种错误的出现，会思考是否能够将路径存在vuex中统一管理，例：

vuex代码

const repairs = {
    state: {
        changeRoute:""
    },
    mutations:{
        GET_CHANGE_ROUTE(state,payload){
            state.changeRoute = payload
        }
    }
}
export default repairs

* 监听路由，将最后路由的结果存进vuex，再使用computed获取这个值：changeRoute，最后再次监听：changeRoute，*

computed: {
     changeRoute() {
       return this.$store.state.changeRoute;
     },
  },
  watch: {
     $route: {
        handler(nv, ov) {
         this.$store.commit("GET_CHANGE_ROUTE", this.$route.path);
        },
     changeRoute: {
        immediate: true,
        deep: true,
        handler(to, from) {
          if (to) {
          this.accordingRouting(to);
          this.getList();
          this.queryParams.orderStatus = "";
         }
       },
     },
    },

 结果并没有什么用

三、解决方法

直接使用watch监听地址栏，和上面的方法相同，依旧是computed获取，watch监听，就不会出现多次请求的情况了

 computed: {
    path() {
      return location.pathname;
    },
  },
  watch: {
    path: {
      immediate:true,
      deep:true,
      handler(to, from) {
        if (to) {
          this.accordingRouting(to);
          this.getList();
        }
      },
    },
  }

over，over~

​