vue 跳转同一路由,页面不刷新解决方案

问题原因 ： vue官网详细解释说明使用同一路由携带不同参数，本质上是重用相同的组件实例，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，因此不会调用组件的生命周期挂钩

解决方案1 - 监听路由变化

官方提供的解决方案为要对同一组件更改做出反应，监听$route的变化，或者使用使用2.2中引入的beforeRouteUpdate 导航卫士，调用对应的方法

//#/mk_gsui?id=2
// 监控data中的数据变化
watch: {
    $route(to, from) {
      if (this.$route.query.id) {
        console.info( "加载页面数据" );
      }
    }
},


//或者使用beforeRouteUpdate 导航位置监听路由变化
beforeRouteUpdate(to, from, next) {
    console.info("==当前路由id==" + this.$route.query.id);
    if (this.$route.query.id) {
      console.info("加载页面数据");
    }
    next();
},

注意：

• 该方案可以在监听方法中完成希望在vue生命周期初始化过程中的业务逻辑，加载相关的数据;可以实现页面重新加载数据效果,但是滚动条并未重置，因此需要对滚动条进行重置处理；
• 当页面刷新后，此时会认为路由并未发生改变，虽然此时watch中的$rou