美文网首页
vue保留页码

vue保留页码

作者: 小话梅噢 | 来源:发表于2020-08-19 17:03 被阅读0次

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

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

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

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

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

    相关文章

      网友评论

          本文标题:vue保留页码

          本文链接:https://www.haomeiwen.com/subject/tmirjktx.html