vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据
一、需要缓存的内容:
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项目实现详情页后退缓存之前的数据的更多相关文章
- vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492 vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
问题背景:有时候一些列表会有一些跳转的需求,比如跳到详情页.或者是其他相关的页面(比如跳到用户列表去查看用户的相关信息)等,此时再返回列表页,列表页会刷新重置.目前需求就是需要改成如下情况: 问题1. ...
- vue列表到详情页的实现
路由里边的 router/index.js path:'/detail/:id' 动态id 列表页渲染时: :to="'/detail/'+item.id" ===>id是指 ...
- 更换vue项目中标签页icon
问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...
- vue项目设置每个页面的title
1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-we ...
- 前端Vue项目——课程详情页面实现
一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...
- vue 默认展开详情页
{ path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }
- vue中前进刷新、后退缓存方案收集
来源掘金: https://juejin.im/post/5b2ce07ce51d45588a7dbf76 来源博客园 https://www.cnblogs.com/wonyun/p/8763314 ...
- nginx实现商品详情页的缓存
随机推荐
- HDU 3461 思维+并查集
Code Lock 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3461 Problem Description A lock you use has ...
- TheSierpinskiFractal(POJ-1941)【递推】
题意:用‘\’,'/','_'按照给定规则画出三角形 题目链接:https://vjudge.net/problem/POJ-1941 思路:题中的三角形生成规则是符合递推关系的,可以先手动完成第一个 ...
- Maven学习存档(3)——eclipse集成maven
一.安装Maven插件 在eclipse的菜单中选择Help——Install New Software 在弹出框的Work with中写入插件安装地址:http://m2eclipse.sonaty ...
- JDK + Tomcat 安装 + 制作自定义镜像【第 2 篇 Tomcat】
[第 1 篇 JDK]:https://www.cnblogs.com/del88/p/11842387.html[第 2 篇 Tomcat]:https://www.cnblogs.com/del8 ...
- 【温故知新】php 魔术方法
<?php class Magic{ private $name; /** *构造方法,在类被实例化时自动调用,一般用于初始化操作 */ public function __construct( ...
- footer始终在页面最底部的方法(问题待检验)
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- MUI 支付案例(支付宝/微信)
首先说明一下,本文借鉴了多位博主的文章,所以会看到很多一样的代码. 写这篇博客主要目的是为了便于后期查看(不好之处,敬请留言吐槽),案例经本人测试,是可以使用的. 先上效果图 前端HTML代码: &l ...
- Dart的导包
Dart中的库主要有三种: 1.我们自定义的库 import 'lib/xxx.dart'; 2.系统内置库 import 'dart:math'; import 'dart:io'; import ...
- 解决故障码400,“”The plain HTTP request was sent to HTTPS port“”
Nginx HTTP服务器的报错"400 Bad Request: The plain HTTP request was sent to HTTPS port",本文将讲解如何解决 ...
- web开发:jquery高级
一.jq选择器 二.属性操作 三.jq轮播图 四.样式操作 五.jq动事件 六.jq动画 七.自定义动画 八.jq动画案例 一.jq选择器 - css3语法选择器 ```js$('css3选择器位') ...