webview更新vue页面地址栏参数，页面数据不更新问题

背景：

APP启动时会预加载web页面，web页面依赖APP的相关权限数据(例如APP定位坐标)

场景：

1.首次进入APP，用户拒绝授权定位或者手机定位不开启，这时web页面已经被预加载，例如地址：

https://www.baidu.com/index.html#/

但获取不到定位坐标，web页面默认会加载北京的数据。

2.用户开启手机定位，APP获取到经纬度，重新加载一次Web页面，此时的url可能是这样的

https://www.baidu.com/index.html#/?lat=143.232232&lon=32.234432

问题：

此时的webview页面并没有重新加载，还是首次加载的北京的数据。

解决方案：

1.利用watch监听router中query的变化

watch: {
      '$route' (to, from) { //监听路由是否变化
          if(to.query.lat != from.query.lat){
              this.loadData();//重新加载数据
          }
      }
}

参考Vue Router响应路由参数的变化一节

原理

在回顾下我们的场景，APP加载的一直是https://www.baidu.com/index.html#/这个地址，只是后边追加的参数不同，再回想下vue单页面路由的原理，只有访问到对应的路由才会触发对应的页面加载（当前路由和要跳转的路由对应同一个组件时，组件不会被更新，生命周期不会被执行），才会触发页面中的vue的生命周期，所以，可以利用watch来监听路由参数的变化。