如果缓存较多内容请使用keep-alive,本文仅针对个别需要缓存的页面。
由于每次打开都会重新加载页面的数据,因此在第二页(非第一页)的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')
}
备注:个人理解,希望可以帮到你