【Vue】组件复用导致的路由切换时页面不刷新问题

页面逻辑

通过router-link，携带不同params参数，导航向同一个组件。

出现问题1

不同路由切换时组件上的页面不刷新。

问题原因1

mounted() {
    this.getData();
  },

把获取新数据的代码写在了vue的mounted生命周期钩子里，但问题是，mounted只会在组件刚创建、挂载的时候被调用，而切换路由时组件并不会被销毁，所以页面一直停滞在最开始的状态。

这时候，千万不要在update生命周期钩子中写获取新数据的代码，因为update刷新频率很高，会产生大量的重复请求，浪费流量浪费时间。

出现问题2

不同路由切换时信息展现错误，展现的是上一个点击的路由页面信息。

问题原因2

beforeRouteUpdate() {
    this.getData();
  }

把获取新数据的代码写在了vue的beforeRouteUpdate钩子里，但是此时是路由更新之前，新的路由还没有出来，而获取新数据的函数就被调用了，所以获取到的前一个路由下的数据，所以页面展现的是上一个点击的路由页面信息。

我们看一下vue router文档中的导航流程：
vue router文档中关于beforeRouterEnter还有一段话：
结合上面可知，beforeRouterEnter在第7步被调用，这时新组件还没被确认，而beforeRouterUpdate更是在第4步就被调用了，所以beforeRouterUpdate当中得到数据的property是上个组件中的，新数据停留在了上个组件中，因此新的页面呈现的是前一个组件的内容。

解决方案1

使用watch方法，监听$route的变化，是最稳妥的方法了。

watch: {
    $route() {
      if (this.$route.params.genre_id != null) {
        this.getData();
      }
    },
  },

这里之所以还要判断一次this.$route.params.genre_id != null，是因为如果从当前路由的组件跳到了别的组件，那么route很可能就没有了，就会报错，显示/undefined不存在。

出现问题3

新数据能正常获取了，不过这是个多图片呈现网页，获取的新数据是一组图片id，由此在页面上通过img标签的src请求图片资源，src的请求路径通过$route.params.set_id和image_id共同构造而成。但是这时出现图片src居然还在请求前一个路由下的图片，但诡异的是图片标题却正确。

问题原因3

这是由于新一组图片id是通过axios异步获取的，而$route.params.set_id却是现成的，所以vue一检测到$route.params.set_id发生了改变，立马重新渲染了所有图片，当然图片的src也被重新请求了，但注意，这时候新一组图片id还没异步传回来，所以请求的图片都是前一个路由下的。

解决方法2

在图片的src属性中不直接使用$route.params.set_id，在组件的data中创建一个新的property：set_id，然后在异步获取新数据的函数中，获取完了新一组图片id后，给this.set_id赋值$route.params.set_id。