问题描述:由于需求的需要,路由需要加上缓存 <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开发问题 - 跳转页面更新,返回还原旧数据的更多相关文章

  1. mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用

    项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...

  2. js通过生成临时表单再删除的方式向后台提交数据(模拟ajax的post提交但还要跳转页面不返回数据)以及 struts向前台返回文件下载及防止中文乱码处理

    为了避免发送数据中有特殊字符,发送时用 encodeURIComponent 编码 (其实这个 if中是直接通过浏览器下载文件的方法,else是向后台传数据的方法) struts后台Action处理接 ...

  3. 利用VS2010开发一个跳转页面aspx

    在开发项目的过程中,由于要集成Cognos的报表通过URL,但是Cognos报表的本身URL长度过程,那么此时就需要开发一个跳转的页面,下面我们就采用VS2010开发一个跳转的页面Default.as ...

  4. springmvc 跳转页面或者返回json

    方法的返回使用ModelAndView,分别new两个modelAndView,返回json的 是ModelAndView mv = new ModelAndView(new MappingJacks ...

  5. vue tab栏缓存解决跳转页面后返回的状态保持

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  6. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  7. ThinkPHP5.0框架开发实现简单的页面跳转

    ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...

  8. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  9. Ajax实现页面跳转与结果返回

    ajax实现页面局部跳转与结果返回 1.带有结果返回的提交过程 这里用一个提交按钮来演示,HTML代码为: <input type="button" class=" ...

随机推荐

  1. 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList问题

    在spring + springmvc + mybatis框架中,我们配置接口对外返回json格式,但是报如下错误: 24-Oct-2017 17:42:23.495 严重 [http-nio-808 ...

  2. Linus与陈庆

    Linus 1969年末,李纳斯出生于芬兰的赫尔辛基市,算是赶上了60后的尾巴.小时候他是个其貌不扬的孩子,除了一个鼻子长的「富丽堂皇」之外乏善可陈.他为了让鼻子看上去小一些,经常戴上眼镜就不愿意摘下 ...

  3. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第三篇(登录窗口的实现以及如何保存登录者的信息)

    一.前言: 1.再看这篇文章的时候,您是否已经完成前两篇介绍的文章里的功能了?(Tabs页的添加,Tabs页右键的关闭,主题的更换)                 2.今天来说说登录窗口吧,看截图: ...

  4. redis系列:通过文章点赞排名案例学习sortedset命令

    前言 这一篇文章将讲述Redis中的sortedset类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/ ...

  5. vue入门(一)----组件

    由于工作需要,最近在写一些前端的东西.经过向开发经验丰富的前端工程师的请教之后,得出一个结论----2016年前端被玩坏了,其实对于我来说我并不是太了解这句话的深刻含义,只是觉得是不是因为前端技术突飞 ...

  6. Linux中关机和磁盘管理命令

    常用的关机命令 shutdown -h 关机 -r 重启 halt poweroff reboot 重启 logout 退出登录命令 磁盘管理命令 df -h 以1024进制计算最合适的单位显示磁盘容 ...

  7. DataGridView控件对Column的设置

    http://stackoverflow.com/questions/18666582/datagridview-autofit-and-fill 1.Column覆盖所有width: dgv.Aut ...

  8. 洛谷P3478 [POI2008]STA-Station

    P3478 [POI2008]STA-Station 题目描述 The first stage of train system reform (that has been described in t ...

  9. 2017-10-20 NOIP模拟赛2

    P98 a [问题描述]你是能看到第一题的 friends 呢.——hja世界上没有什么比卖的这么贵的弹丸三还令人绝望的事了,所以便有了这么一道题.定义?(?)为满足(? × ?)|?的有序正整数对( ...

  10. Jmeter-线程时间

    随手记录下自己在学习遇到的线程时间问题 1.线程数14个,要求每秒进入2个线程,这设置准备时长因为7秒       及准备时长 = 线程数/每秒需要进入的线程数量      如上列中:准备时间 = 1 ...