vue同页面跳转，实现页面重新刷新解决方案

问题描述

vue跳转同一路径时，路由参数改变，但页面无法更新

问题原因

vue路由切换实际是组件间的切换，引用相同组件的时候，组件的生命周期钩子不会再被调用,页面就无法更新

解决方案

方案1.watch监听路由参数变化(或者beforeRouteUpdate)，并重新渲染

该方式可以实现页面重新加载数据效果，滚动条没有返回顶部问题，需要让document.body.scrollTop=0;

watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }

方案2. provide和inject结合使用

实现思路：在app.vue目录下，对进行摧毁和重建(通过变量routerAlive的状态控制)，页面会进行重新渲染。

下面是方案2的具体实现

//app.vue

//page.vue