场景

app启动的时候会预加载web页面，web页面依赖app的相关权限数据（例如aoo定位坐标）

  1. 首次进入app，用户据胡娥授权定位或者手机定位未开启，这时候web页面已经预加载。(以hash路由为例)
1
https://www.baidu.com/index.html#/

获取不到定位，页面先加载北京的数据。

  1. 用户开启手机定位，app获取到经纬度，重新请求一次接口，url地址为
1
https://www.baidu.com/index.html#/?lat=143.232232&lon=32.234432

问题

url更新并没有请求接口更新数据

解决问题

利用watch监听router中query的变化

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

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

参考文章