专栏首页移动端周边技术扩展keepAlive页面缓存以及新页面不刷新问题(activated方法)

keepAlive页面缓存以及新页面不刷新问题(activated方法)

问题

如果我们按照 A 类型进行搜索,查出来100条数据(默认20条/页),我们翻阅到第 3 页,找到 B 数据,我们对 B 进行编辑,编辑过后回到列表页面,按照用户体验我们还是想回到按 A 搜索的第 3 页的。

遇到了这个问题,我尝试过存储vuex、session、组件引入传参等方式,发现都不太合适。

vuex:首先说明,不要为了使用 vuex 而使用,而是与其他方式相比,只有 vuex 是最方便的时候在使用。拿我的项目举例,我的这个页面需要 7 个搜索条件还有分页的页码及每页的条数,还有一个控制表头显示的列表共10个参数。如果使用 vuex 需要引入并且添加store中的方法代码【各js相互引入,抛出,定义等】还需要在组件中有修改值得地方commit。10个参数,使用 vuex 相对来说代码量比较大且操作繁琐。你项目中不止一个编辑的情况下,以上工作都是倍数增长。我项目中20来个编辑详情吧!!!

session:代码量和 vuex 不相上下,而且存储session其实和暴露明文是一样的,一些信息会暴露出去,我很不推荐。

组件引入:10个参数传来传去很是麻烦而且容易混乱,不符合业务逻辑UI设计

KeepAlive :Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM。

但是有个问题,因为编辑页、注册页等是通过路由跳转,当我们编辑了某条数据,返回列表页时,因为被缓存列表页展示的数据并没有被更新过来,只有刷新下才能更新过来。

重点来了 就几行代码,解决问题。

keepAlive怎么使用自己查询,这里介绍的是使用后如何刷新问题。

// 列表页面
 activated() {
      this.search()
 }

用到的是 keepAlive 的生命周期中的activated方法,该方法在keepAlive激活时调用。所以你页面中需要的刷新都写在这里面就完成了。

你以为这样就结束了吗!!!没有

A页面缓存了,push进入B页面。首次进入B页面数据正常,url也正常。回退到A页面,A页面确实缓存了。再从列表中选择进入B页面。此时B页面的数据是缓存的,但是url是正常的!!!见了鬼了!

处理方案一:

在B页面也加,进行处理

// 详情页面
 activated() {
     需要刷新的数据
 }

处理方案二:

      <keep-alive v-if="keepAlive" exclude="Detail">
        <router-view :key="key"></router-view>
      </keep-alive>

      <keep-alive v-else exclude="Detail">
        <router-view :key="key"></router-view>
      </keep-alive>

router中添加exclude="Detail" ,你不想被缓存的页面都name都写出Detail

include和exclude都是针对组建名称,非路由!!

include - 字符串或正则表达式。只有匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

应该结束了!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Xcode去除警告⚠️

    程序员不务正业
  • 同时遍历多个数组

    程序员不务正业
  • 关于项目新功能

    程序员不务正业
  • 优秀原型设计欣赏:美食类App原型制作-Kitchen Stories

    题材有Mockplus(摹客)团队提供,仅供参考学习。

    奔跑的小鹿
  • 学员投稿 | iframe 解决跨域

    ? 天气降温,大家注意保暖~~~ ? 因为学习了腾讯课堂NEXT学院的前端进阶课程,所以打算把课程内容都总结一遍。有些都是很普通很常见的知识,但是为了巩固自...

    腾讯NEXT学位
  • 想要提高商品页面的转化率,还得学会这几招

    译者:陈明艳 审校:朱玉雪 本文长度为5032字,预估阅读时间13分钟。 摘要:想要提高产品的转化率,其实不难,有最完美的商品页面,轻松搞定。 ? 一个有效的...

    iCDO互联网数据官
  • JavaScript将iframe中控件的值传到主页面控件中

    主要是通过在主页面定义一个传输数据的函数GetData(data),然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetD...

    aehyok
  • 小程序之图片懒加载

    懒加载,前端人都知道的一种性能优化方式,简单的来说,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

    前端黑板报
  • HTML中id、name、class 区别

    id的用途  1) id是HTML元素的Identity,主要是在客户端脚本里用。

    阳光岛主
  • MSF后渗透利用整理|MSF命令大全二

    use exploit/windows/local/ms18_8120_win32k_privesc

    洛米唯熊

扫码关注云+社区

领取腾讯云代金券