vue3使用this.$router.push跳转后页面生命周期内的请求数据不重载问题

场景:

        在list页面点击查看后,打开一个新的tab页展示数据。在新的tab页点击取消关闭当前tab页面,并捅过路由push的方式打开原页面。此时跳转到原页面后,created和mounted中的方法不执行,页面数据一直处于loading转圈的动画。

原因:

        当进入 实例生命周期完成后 再次进入跳转页面(即原页面)的 实例已缓存,所以不会再去重新请求数据渲染一次 ,( created mounted 生命周期内的重新请求数据不会再次触发 )

解决办法:

        在原页面使用watch监听路由,在监听的方法内调用你要执行的方法。如下:

  created() {
    this.getList();
  },
  watch: {
    $route() {
      this.getList()
    }
  },

你可能感兴趣的:(vue,前端)