vue项目实现详情页后退缓存之前的数据

2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244
 

一、需要缓存的内容:

1、后退缓存条件查询的数据

2、后退缓存分页信息

二、实现

通过参考网上搜集的资料知道用keepAlive实现

参考地址:https://blog.csdn.net/sinat_17775997/article/details/80950246

1、在路由文件router.js中针对要缓存的页面进行设置

添加keepAlive: true,通过此字段判断是否需要缓存当前组件

添加keepAlive: true,通过此字段判断是否需要缓存当前组件

2、在app.vue文件中添加 :

<keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>

$route.meta.keepAlive表示在1中配置缓存的页面进行缓存

3、在列表页面添加路由监听

(1)当要跳转到此列表页面的时候,设置keepAlive= true,缓存当前的页面数据

(2)在列表页面添加activated钩子函数
        activated() {
            // isUseCache为false时才重新刷新获取数据
            // 因为列表页面使用keep-alive来缓存组件,所以默认是会使用缓存数据的         
            if(!this.$route.meta.isUseCache) {
                // 清空原有数据
                this.allModelsData = []
                this.dataTypeList = []
                // 这是我们获取数据的函数
                this.fetchModels()
                this.getModelDatatype()
                this.$route.meta.isUseCache = false
            }
        },

4、在列表详情页添加:

beforeRouteLeave(to, from, next) {
            console.log("to.path-->", to.path)
            if(to.path == '/masterdatamodel') {
                to.meta.isUseCache = true
            } else {
                to.meta.zai  = false
            }
            next()
        },

//to.path == '/masterdatamodel'判断页面是否跳转到列表页,跳转到列表页则保存缓存数据

5、做完以上发现:

(1)列表页条件查询后,进入详情页,再后退,数据缓存依然在。要求实现

(2)进入详情页,再后退,发现分页不见了,页数只有1页,保存的数据为之前进入详情页的那页数据。

排查原因:发现分页组件dpGrid 使用的v-if="routerAlive",修改为v-show="routerAlive",至此分页缓存实现。

<dpGrid v-if="routerAlive" ref="gridPageComponent" @gridFeedback="onGridFeedback" :is-show="isGridShow" :data-fields="localPageConfig.dataFields" :grid-cols="gridCols" :grid-options="gridOptions" :data-rows="dataRows" :refresh-flag="refreshFlag">
            </dpGrid>

修改为:

<dpGrid v-show="routerAlive" ref="gridPageComponent" @gridFeedback="onGridFeedback" :is-show="isGridShow" :data-fields="localPageConfig.dataFields" :grid-cols="gridCols" :grid-options="gridOptions" :data-rows="dataRows" :refresh-flag="refreshFlag">
            </dpGrid>

(3)v-if和v-show的区别:

v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐。

详情参考:https://www.cnblogs.com/wmhuang/p/5420344.html

当使用v-if时候其他分页信息由于隐藏,后退则被删除了;而使用v-show,数据仍然保留,其他的分页的数据通过display:none被隐藏了。

vue项目实现详情页后退缓存之前的数据的更多相关文章

  1. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  2. vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求

    问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...

  3. vue列表到详情页的实现

    路由里边的 router/index.js path:'/detail/:id' 动态id 列表页渲染时: :to="'/detail/'+item.id" ===>id是指 ...

  4. 更换vue项目中标签页icon

    问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...

  5. vue项目设置每个页面的title

    1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-we ...

  6. 前端Vue项目——课程详情页面实现

    一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...

  7. vue 默认展开详情页

    { path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }

  8. vue中前进刷新、后退缓存方案收集

    来源掘金: https://juejin.im/post/5b2ce07ce51d45588a7dbf76 来源博客园 https://www.cnblogs.com/wonyun/p/8763314 ...

  9. nginx实现商品详情页的缓存

随机推荐

  1. HDU 3461 思维+并查集

    Code Lock 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3461 Problem Description A lock you use has ...

  2. TheSierpinskiFractal(POJ-1941)【递推】

    题意:用‘\’,'/','_'按照给定规则画出三角形 题目链接:https://vjudge.net/problem/POJ-1941 思路:题中的三角形生成规则是符合递推关系的,可以先手动完成第一个 ...

  3. Maven学习存档(3)——eclipse集成maven

    一.安装Maven插件 在eclipse的菜单中选择Help——Install New Software 在弹出框的Work with中写入插件安装地址:http://m2eclipse.sonaty ...

  4. JDK + Tomcat 安装 + 制作自定义镜像【第 2 篇 Tomcat】

    [第 1 篇 JDK]:https://www.cnblogs.com/del88/p/11842387.html[第 2 篇 Tomcat]:https://www.cnblogs.com/del8 ...

  5. 【温故知新】php 魔术方法

    <?php class Magic{ private $name; /** *构造方法,在类被实例化时自动调用,一般用于初始化操作 */ public function __construct( ...

  6. footer始终在页面最底部的方法(问题待检验)

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  7. MUI 支付案例(支付宝/微信)

    首先说明一下,本文借鉴了多位博主的文章,所以会看到很多一样的代码. 写这篇博客主要目的是为了便于后期查看(不好之处,敬请留言吐槽),案例经本人测试,是可以使用的. 先上效果图 前端HTML代码: &l ...

  8. Dart的导包

    Dart中的库主要有三种: 1.我们自定义的库 import 'lib/xxx.dart'; 2.系统内置库 import 'dart:math'; import 'dart:io'; import ...

  9. 解决故障码400,“”The plain HTTP request was sent to HTTPS port“”

    Nginx HTTP服务器的报错"400 Bad Request: The plain HTTP request was sent to HTTPS port",本文将讲解如何解决 ...

  10. web开发:jquery高级

    一.jq选择器 二.属性操作 三.jq轮播图 四.样式操作 五.jq动事件 六.jq动画 七.自定义动画 八.jq动画案例 一.jq选择器 - css3语法选择器 ```js$('css3选择器位') ...