Vue-element-admin: TabsView如果是一个多页table，在实际调用API每次都会刷新

[hustfly]

标签页跳转时，（TabsView）如果是一个多页table，在实际调用API每次都会刷新页面。
例如table有5页，每次切换之后显示的都是第1页。

[PanJiaChen]

并不能重现你的问题，其提供更具体问题描述。

[hustfly]

使用了TabsView之后，keepAlive里边已经有对应的cachedViews内容。
但是每次切换一个列表页面 created方法还是会调用，不用mock的话后台的请求也会发送，然后页码都会重置。在preview确实不能复现，不知道和mock有没有关系

[PanJiaChen]

那肯定是没有缓存成功，keepAlive的页面不会触发created钩子。

所以请检查是否正确使用keepAlive、

[eyescu]

可能我俩遇见的问题一样，我实际请求api获取数据和mock模拟数据真的不一样，mock可以缓存，但是我api获取数据缓存不了，不知道是不是我哪点用错了。

总之我参考了 https://blog.csdn.net/qq_35049655/article/details/82112545 ，代码改成下面这样了

// 1. 修改 created，页面返回时获取本地存储的 page
created() {
    var page = sessionStorage.getItem(this.$route.path + '_page')
    if (page && page > 0) {
      this.listQuery.page = parseInt(page)
    }
    this.getList()
 },

// 2. 修改请求，paginationShow(关键) 是博客作者介绍的方法，可以看下上面的链接
getList() {
      this.listLoading = true
      this.paginationShow = false
      fetchList(this.listQuery)
        .then(response => {
          const res = response.data
          this.total = res.total
          this.list = res.data

          this.listLoading = false
          this.$nextTick(function() {
            this.paginationShow = true
          })
        })
        .catch(() => {
          this.listLoading = false
        })
    },

// 3. 页码跳转时存储下 page
handleCurrentChange(val) {
      sessionStorage.setItem(this.$route.path + '_page', val)
      this.listQuery.page = val
      this.getList()
    }

如果用错的话，大神给点指导吧，谢谢啦

[hustfly]

可能我俩遇见的问题一样，我实际请求api获取数据和mock模拟数据真的不一样，mock可以缓存，但是我api获取数据缓存不了，不知道是不是我哪点用错了。

总之我参考了 https://blog.csdn.net/qq_35049655/article/details/82112545 ，代码改成下面这样了

// 1. 修改 created，页面返回时获取本地存储的 page
created() {
    var page = sessionStorage.getItem(this.$route.path + '_page')
    if (page && page > 0) {
      this.listQuery.page = parseInt(page)
    }
    this.getList()
 },

// 2. 修改请求，paginationShow(关键) 是博客作者介绍的方法，可以看下上面的链接
getList() {
      this.listLoading = true
      this.paginationShow = false
      fetchList(this.listQuery)
        .then(response => {
          const res = response.data
          this.total = res.total
          this.list = res.data

          this.listLoading = false
          this.$nextTick(function() {
            this.paginationShow = true
          })
        })
        .catch(() => {
          this.listLoading = false
        })
    },

// 3. 页码跳转时存储下 page
handleCurrentChange(val) {
      sessionStorage.setItem(this.$route.path + '_page', val)
      this.listQuery.page = val
      this.getList()
    }

如果用错的话，大神给点指导吧，谢谢啦

最后我发现问题了，不能缓存的原因是页面里没有指定 name属性，如果有唯一的name就可以缓存