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

问题描述：由于需求的需要，路由需要加上缓存 <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方法就是返回不调用，跳转调用的方法

　

 

转载于:https://www.cnblogs.com/vs1435/p/6518331.html