PC端/移动端,浏览器通过地址修改参数访问H5页面不刷新情况

问题描述：

链接demo1：https://baidu.com/#/demo?params=1

链接demo1：https://baidu.com/#/demo?params=2

1、PC端，browser首次访问链接一或链接二，均可正常加载；
2、如browser首次已访问链接一，粘贴链接二到URL窗口并回车，只会更新URL窗口显示链接二，并不会刷新页面内容和访问后台；
3、鼠标focuse到URL窗口，不对URL内容做任何改变，回车，页面内容刷新正确。
4、移动端现象同PC，首次访问正确；粘贴变更的URL只会刷新URL窗口，不
会刷新内容；选择URL窗口不改变URL内容点击前往，页面内容刷新正确。

 原因分析：

1、URL参数值变化时候，浏览器认为URL HASH未改变所以不会给服务器发送请求

2、需要获取数据的函数在生命周期中 ，首次页面加载已挂载执行完成，当修改url参数时由于路由模式是hash，因而并没有从新读取url，而是在browser的url缓存中读取上一个页面的数据

解决方法： 

1、监听popstate事件，是页面强制刷新

 window.addEventListener("popstate", function(e) {
               self.location.reload();
     }, false);

2、 使用watch监听$router的变化

watch: {
		'$route' (to, from) { //监听URL地址栏参数变化
			 if(to!==from){
               this.$router.push(to)
            }
		}
	}

3、 给路由绑定唯一的key

 

<router-view :key="key"/>


computed: {
   //name+时间戳生成ID身份
		key() {
		return this.$route.name ? this.$route.name + new Date() : this.$route + new Date()
	}
},