POS开发问题 - 跳转页面更新,返回还原旧数据

2023-06-07,,

问题描述:由于需求的需要,路由需要加上缓存 <keep-alive> ,还要实现跳转就初始化,返回还原的需求。意思就是:页面 A 跳转到页面 B ,页面 B 要初始化数据,但是 页面 B 返回页面 A ,页面 A 还原之前的数据即可 。利用vue 的缓存和钩子函数很难实现这样的需求

想法一:

当页面返回的时候,调用方法 $destroy清除缓存 , 那么第二次跳转到该页面,就会执行钩子函数mounted,结果不行,因为发现 只要调用过 $destroy 方法的页面,以后都不会使用缓存,那么,我们的需求返回还原之前的数据就不能实现。

想法二:

实现一个init方法,如果返回就不需要调用,如果是页面跳转就调用。

实现原理:

注入全局组件:mixin,组件添加activated钩子函数,组件methods 添加一个路由跳转的方法 goPage
goPage 方法接受一个参数 init,默认是 true ,利用push方法跳转页面,并传递给init给下一个页面
activated 钩子函数 获取上一个页面传递的 init参数 , 如果true , 那么调用判断业务组件是否注册了init方法,如果注册了,那么调用。
之后每次路由跳转,都用 goPage  ,在所有页面的 methods注册init 方法,init方法就是返回不调用,跳转调用的方法

 

POS开发问题 - 跳转页面更新,返回还原旧数据的相关教程结束。

《POS开发问题 - 跳转页面更新,返回还原旧数据.doc》

下载本文的Word格式文档,以方便收藏与打印。