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方法就是返回不调用,跳转调用的方法
POS开发问题 - 跳转页面更新,返回还原旧数据的更多相关文章
- mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用
项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...
- js通过生成临时表单再删除的方式向后台提交数据(模拟ajax的post提交但还要跳转页面不返回数据)以及 struts向前台返回文件下载及防止中文乱码处理
为了避免发送数据中有特殊字符,发送时用 encodeURIComponent 编码 (其实这个 if中是直接通过浏览器下载文件的方法,else是向后台传数据的方法) struts后台Action处理接 ...
- 利用VS2010开发一个跳转页面aspx
在开发项目的过程中,由于要集成Cognos的报表通过URL,但是Cognos报表的本身URL长度过程,那么此时就需要开发一个跳转的页面,下面我们就采用VS2010开发一个跳转的页面Default.as ...
- springmvc 跳转页面或者返回json
方法的返回使用ModelAndView,分别new两个modelAndView,返回json的 是ModelAndView mv = new ModelAndView(new MappingJacks ...
- vue tab栏缓存解决跳转页面后返回的状态保持
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- ThinkPHP5.0框架开发实现简单的页面跳转
ThinkPHP5.0框架开发实现简单的页面跳转 一.效果 登录界面 登录成功界面 登录失败界面 二.目录结构 三.代码 控制器中的Login.php <?php // 声明命名空间 names ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- Ajax实现页面跳转与结果返回
ajax实现页面局部跳转与结果返回 1.带有结果返回的提交过程 这里用一个提交按钮来演示,HTML代码为: <input type="button" class=" ...
随机推荐
- 10、RNA-seq for DE analysis training(Mapping to assign reads to genes)
1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...
- 看下面代码输出结果Java
编译错误 在调用子类构造器之前,会先调用父类构造器,当子类构造器中没有使用"super(参数或无参数)"指定调用父类构造器时,是默认调用父类的无参构造器,如果父类中包含有参构造器, ...
- 深入学习JavaScript: apply 方法 详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- fsck修复系统断电或非正常关机导致的系统磁盘问题
问题描述: unexpected inconsistency; run fask mannally. (i.e., without -a or -p options) fsck repaire man ...
- 20169219《linux内核原理与分析》第七周作业
网易云课堂学习 把write系统调用加入到MenuOS里面 我在试验过程中在MenuOS里加入了time.time-asm.write和write-asm命令.以time和time-asm为例, 步骤 ...
- 设置css属性
- iphone5 A1429国行IOS8.4.1 越狱 完美使用电信3G
国航 8.4.1,越狱,使用电信3G,能打电话,能发短信,正常上网使.(越狱降级方式,请参照本文末端连接) 有好多人说不管怎么试都是无服务,请查看 设置-蜂窝移动网络-漫游里面,必须只有 语音漫游 这 ...
- OpenStack基础知识-tox的详解介绍
1.tox简介 tox是通用的虚拟环境管理和测试命令行工具.tox能够让我们在同一个Host上自定义出多套相互独立且隔离的python环境,每套虚拟环境中可能使用了不同的 Python 拦截器/环境变 ...
- PAT 1071【STL string应用】
1.单case很多清空没必要的 2.string+ char 最好用pushback 3.string +string就直接+ #include <bits/stdc++.h> using ...
- 初识Scrapy之再续火影情缘
前言Scrapy框架之初窥门径1 Scrapy简介2 Scrapy安装3 Scrapy基础31 创建项目32 Shell分析4 Scrapy程序编写41 Spiders程序测试42 Items编写43 ...