在单页应用中,尤其在移动设备中,经常会有保持页面状态的情况,最佳效果是实现类似于原生应用中的前进刷新,后退保存页面状态。如果能解决路由回退传参,那就更妙了。
vuex: 纯手工操作
keep-alive: 手动版
只要在activated 的生命周期处,分流好不同页面过来的对应处理,效果是很棒的。
这个组件的主要目的应该是为了组件的复用,用内存换性能,单单为了保存页面数据,有一种杀鸡用牛刀的感觉。现在的设备性能都那么强,vue 的优化又这么棒,用起来也无妨。
keep-alive: 自动版
配合vue-router 让组件动态的keep-alive
这个也是用搜索引擎搜索vue 前进刷新,后退缓存,经常搜到的实现方式,但我写出来的总有bug,进而感觉逻辑都有问题,根据keep-alive 的生命周期来看,动态设置keep-alive 时,生效的时机应该在activated 之前。
假设有A->B->C 这样一个页面跳转,在进入B 页面的初始化生命周期时,是把keep alive的属性设为true 还是false,肯定是true 了,不然去了C 页面,再回B 页面就没有B 页面的缓存效果了, 如果缓存了B 页面,返回A页面后,再去B页面是true 还是false, 是true 的话,页面用了上一次的页面,测试要来提bug了, false的话,去了C 页面就回不来了
手写缓存data 的mixins
在页面destroyed 的时候,保存页面的$data, 在页面created 的时候把保存的数据还回去,这种写法和上面的keep-alive 手动版相比,只缓存了数据,在组件初始化的时候也要做不同页面的分流处理。
缺陷是给组件的$data 直接赋值会报错,通过Object.assign($data,data)的方式可以赋值成功,并且在测试中可以完美运行,但是总感觉有隐藏bug
手写mixins 组件配合vue-router
这个和上面的vue-router 配合keep-alive 不一样。
其他
关于如何判断页面是前进还是后退
在用vue-router 时,用一个对象缓存beforeRouteEnter 中to.name, 值为from.name, 比如cache[to.name] = from.name;
一开始如果cache[to.name]的值是undefined,就代表第一次进入这个组件,是前进,否则是后退。另外还可以提供一个由组件页面说,那些页面到我这是前进,那些页面到我这是后退的接口。
关于更妙了的路由回退传参。
通过这样的mixins配合vue-router ,约定一个对象,应该也能解决吧。
转载于:https://juejin.im/post/5cff70676fb9a07ed911b8a3