在这里插入图片描述

由于每次打开都会重新加载页面的数据,因此在第二页(非第一页)的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()
  }

备注:个人理解,希望可以帮到你

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐