浏览器地址栏更改url参数 页面还发送原url参数的请求bug修复

在做定时刷新大屏的需求。需要定时发送一遍请求刷新最新数据。

this.timer = setInterval(() => {
   that.getFun1(); 
   that.getFun2();
   that.getFun3();
   that.getFun4();
 }, 60 * 1000);

其中getFun 发送请求的参数要根据浏览器地址栏的参数来传递
http://localhost:8000/#/a/b?type=1
http://localhost:8000/#/a/b?type=2
获取type值传递参数，发送请求。问题来了
如果是首次加载跳转到 http://localhost:8000/#/a/b?type=1 或者 http://localhost:8000/#/a/b?type=2 页面正常，传递参数正常。当我在浏览器地址栏中修改type值 1 为 2 的时候，定时器里面定时发送 参数 type 为 1的请求和 type 为 2的请求！！而并不是我想要的只发送type2的请求。

首先想到的是原来的 setInterval还在内存中，在 beforeDestory中执行了 clearInterval timer设置为空，在 设置timer之前，判断如果timer值不为空，就 clearInterval timer设置为空。发现没用。
然后发现，每次F5刷新之后就正常了，url的改变enter回车也会走created方法，但是和刷新不一样，刷新整个页面会变白，然后重新请求，url改变页面不会变白，没有重新请求。
刚开始想的是，当url改变回车的时候，有没有什么方法可以自动删除浏览器的缓存。
后面又想到，如果可以自动刷新页面就好了，这个好办。

 window.addEventListener("popstate", function(e) {
          self.location.reload();
}, false);
// vue hash 路由 试了一下 watch $route 不管用

原因分析：
1、URL参数值变化时候，浏览器认为URL HASH未改变所以不会给服务器发送请求
2、需要获取数据的函数在生命周期中 ，首次页面加载已挂载执行完成，当修改url参数时由于路由模式是hash，因而并没有从新读取url，而是在browser的url缓存中读取上一个页面的数据

popstate

每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的 window 对象上触发。
MDN代码例子：

window.onpopstate = function (event) {
  alert(
    "location: " +
      document.location +
      ", state: " +
      JSON.stringify(event.state),
  );
};

history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}