问题描述:由于需求的需要,路由需要加上缓存 <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. 《精通Spring4.X企业应用开发实战》读后感第七章(创建增强类)

  2. SQL Server中通过设置非聚集索引(Non-Clustered index)来达到性能优化的目的

    首先我们一下,在SQL Server 2014 Management Studio中,如何为一张表设置Non-Clustered index 具体可以参考  https://docs.microsof ...

  3. ZOJ 3946 Highway Project (最短路)

    题意:单源最短路,给你一些路,给你这些路的长度,给你修这些路的话费,求最短路和最小花费. 析:本质就是一个最短路,不过要维护两个值罢了,在维护花费时要维护的是该路要花多少,而不是总的路线花费. 代码如 ...

  4. 【WIP】客户端JavaScript 事件处理

    创建: 2017/10/15 完成: 2017/10/15   更新: 2017/11/04 加粗事件的参数 更新: 2017/12/12 增加事件处理时获取事件对象的方法 更新: 2019/05/2 ...

  5. 「学习笔记」Fast Fourier Transform

    前言 快速傅里叶变换(\(\text{Fast Fourier Transform,FFT}\) )是一种能在\(O(n \log n)\)的时间内完成多项式乘法的算法,在\(OI\)中的应用很多,是 ...

  6. 如何使用ROS查找rgbdslam代码包框架的输入

    我想这是一个天大的错误,在没有对整个ROS下的代码有一个整体理性的认知时,我使用感性认知. 由于在跑他的测试代码时,只替换了两个节点的名称,相当于remap了它,以为就可以跑了,结果是不行的. 然后用 ...

  7. go培训课程都学什么?go语言框架学习:xorm框架知识介绍

    xorm框架介绍 xorm是一个简单而强大的Go语言ORM库. 通过它可以使数据库操作非常简便. 通过xorm框架,开发者可以方便的使用各种封装好的方法来代替原生的sql语句.这样就降低了我们开发者使 ...

  8. Scrapy框架初探

    Scrapy 貌似是 Python 最出名的爬虫框架 0. 文档 中文文档:https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.ht ...

  9. 有关UPDATE操作的一些想法

    我们平常写代码的时候,无疑都会接触大量的数据CURD操作.第一反应是这太简单了,那么你在编写UPDATE操作的时候是怎样的逻辑呢?比较下面两段伪代码: code exp.1 $SQL = " ...

  10. zoj3435(莫比乌斯反演)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3435 题意: 给出一个三维坐标 (x, y, z), 问该点与 ...