业务场景:从其他界面返回列表详情界面,要求保留之前的页码
根据业务场景的细节需求,分为两种实现,一种是列表保留页码不刷新数据,一种是保留列表但需要刷新数据.
一,保留页码,不刷新数据
1,在路由中为列表组件设置
meta: { keepAlive: true }2,在路由守卫中做拦截处理
localStorage.from = true if(detail.includes(from.path) && list.includes(to.path)) { localStorage.from = false }其中detail是详情界面的路由数组,list是列表界面的路由数组,如下图.
(此处的判断是当从详情跳转到列表的时候,变量from是false,其余情况是true.from变量是用于判断页面刷新的,from具体见3)
3,在每个列表界面进行判断刷新
activated() { if (JSON.parse(localStorage.from)) { this.query.page = 1 this.search(); } },页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。(引用来自 https://blog.csdn.net/HANGSOME123/article/details/97142383)
因此我们的刷新操作要放到activated中,当from为true时(也就是说页面是从其他地方进入列表的,这时列表就需要进行刷新操作,且页码应该初始化为1),from为false的时候不触发任何操作,此时页面呈现为之前离开时候的渲染效果.
二,保留页码,且刷新数据
1,在列表界面,跳转方法中存储当前页码值
localStorage.page = JSON.stringify(this.query.page)2,在路由守卫中,进行拦截判断
跳转情况不符合 列表->详情 或 详情->列表,则将本地存储中的页码值置为0,符合情况不予处理
if(!((detailTemplateName.includes(from.name) && listTemplate.includes(to.path)) || (listTemplate.includes(from.path) && detailTemplateName.includes(to.name)))){ localStorage.page = 0 }3,在列表界面
如果本地存储中的值不为0,则执行本地存储页码值刷新列表,否则按照page=1刷新
page = JSON.parse(localStorage.page) if(page != 0) { this.query.page = page this.search(page) }else{ this.search() }4,查询列表page参数正确,但是页面显示页码不一致(可能出现的情况)
在执行完列表查询后,成功之后,赋值total的位置书写以下代码(一定要加nextTick)
this.pageshow = false this.$nextTick(() => { this.pageshow = true })其中pageshow是分页的展示与否,如下图
v-if="pageshow"后记:
为什么动态控制keep-alive的值,再搭配this.$destroy()?
this.$destroy()之后keep-alive将不会生效
其次,keep-alive的动态控制之后,出现了一些视图错误
例如 无法针对不同入口使用一个路由地址缓存,呈现出来的缓存始终是一个入口渲染的
网友评论