element-Ui分页跳转后返回当前页(iview相同)

由于每次打开都会重新加载页面的数据，因此在第二页（非第一页）的table中跳转后又从下一页返回，该页面会重新为第一页，解决方式有二种

第一是使用keep-alive，配合v-router的导航钩子

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

第二种是使用h5的 var history = window.sessionStorage
在created中 this.pageIndex = parseInt(history.getItem('pageIndex')) || 1
在分页点击事件中 history.setItem('pageIndex', value)

这里使用的是第二种，因为keep-alive的include属性失效，查询解决方法发现改动工作量太大，故使用第二种。
该方法存在一个问题那就是去的下一页不直接返回，而是去了其他一级菜单，从其他菜单再次进入该页的时候，依旧有缓存，解决就是给返回的界面设置 history.setItem('direction', 'back')
在该需要缓存的组件使用

 if(direction == 'back'){
            this.pageIndex = parseInt(history.getItem('pageIndex')) || 1
            history.removeItem('direction')
        }

实际使用中会出现一种场景，我在列表页去到详情页，在详情页更新了数据，回到列表页我希望保存上次的查询条件，同时能展示刚才的更新数据，这就需要结合上面的两种情况，具体代码如下：这个使用的是keep-alive加history，具体代码如下：

缓存页

// 这里要设置离开时清除缓存，因为除了详情需要缓存条件，其他的不需要
// 缓存当前的页数信息，以便详情页返回时使用
// 将router.js路由里面的meta设置.keepAlive为true
beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = false;
    this.history.setItem('pageIndex', this.queryForPage.pageIndex)
    this.history.removeItem('direction')
    next()
  },
  activated () {
    // keepAlive为true时使用缓存条件，重新刷新获取数据
    // 如果 keepAlive为false改页面不会缓存，会重新加载页面
    // 这里额外加上direction的判断是因为初始化加载时执行created函数和activated函数，避免重复请求
    // 如果你的router设置keepAlive为false达到了你想要的效果
    // 该辅助direction可以去掉，经测验只有设置为true时，第一次返回才有缓存的效果
    // 当然其后的操作缓存是正常的
    // 解决这个问题你也可以为**created**等里面的查询方法设置条件
    let direction = this.history.getItem('direction')
    if (this.$route.meta.keepAlive  && direction) {
      let pageIndex = parseInt(this.history.getItem('pageIndex')) || 1
      this.searchData(pageIndex); // 这是我们获取数据的函数
    }
  }

详情页

// listName 是需要缓存的列表页，该处是列表页的详情，
// 下面的做法是只有详情返回才使用缓存，否则不使用
 beforeRouteLeave (to, from, next) {
    let name = to.name
    if (name === 'listName' ) {
      to.meta.keepAlive = true;
       this.history.setItem('direction', 'back')
    }
    next()
  }

created方式修改

  created () {
    if (!this.$route.meta.keepAlive) {
      this.searchData(); // 这是我们获取数据的函数
    }
  },

经过分析得出了一个更优的解决方案，利用缓存时第一次执行created ，activated ，后续执行activated ，非缓存时执行created ，最终如下：

 <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view  v-if="!$route.meta.keepAlive"></router-view>

需要缓存的页面

created () {
    if (!this.$route.meta.keepAlive) {
      this.searchData(); // 这是我们获取数据的函数
    }
  },
 activated () {
      let pageIndex = parseInt(this.history.getItem('pageIndex')) || 1
      this.searchData(pageIndex); // 这是我们获取数据的函数
  },
  beforeRouteLeave (to, from, next) {
    from.meta.keepAlive = false;
    this.history.setItem('pageIndex', this.queryForPage.pageIndex)
    next()
  },

详情页

 beforeRouteLeave (to, from, next) {
    let name = to.name
    if (name === 'listName' ) {
      to.meta.keepAlive = true;
    }
    next()
  }

备注：个人理解，希望可以帮到你