vue保留页码

业务场景:从其他界面返回列表详情界面,要求保留之前的页码

根据业务场景的细节需求,分为两种实现,一种是列表保留页码不刷新数据,一种是保留列表但需要刷新数据.

一,保留页码,不刷新数据

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的动态控制之后,出现了一些视图错误

例如 无法针对不同入口使用一个路由地址缓存,呈现出来的缓存始终是一个入口渲染的