Vue 页面 前进刷新 后退不刷新(keepAlive)
前言
遇到这一个个问题 需要是这样的 Vue里面的不刷新问题
页面分为: A 主页 B列表页 C 详情页
A beforeRouteLeave 时设置 to.meta.keepAlive = false (A 进入 B页面时), 不缓存 B列表页
B beforeRouteLeave 时 (B -> C)列表页进详情页时 from.meta.keepAlive =true 缓存B列表页
C详情页 返回 B列表页 ,此时B列表页缓存不生效,也就是第一次不生效
总结问题原因:
当进入B列表页后,keepAlive 为 true 时,缓存生效
当离开B列表页时 设置 keepAlive 为 true 时 ,缓存不生效
这就是很头疼的问题,查阅相关资料找到
解决
在app.vue 页面
<transition :name="transitionName">
<keep-alive>
<!-- v-if="isRouterALive" :include="[ keepData ]" -->
<router-view class="child-view" v-if="$route.meta.keepAlive" ></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
</transition>
路由页面配置:
{
path: '/activities/create_proto',
name: 'create_proto',
meta: {
index: 2,
title: '活动创建',
keepAlive: false, //此组件不需要被缓存
rank:1,
},
component: () =>
import (/* webpackChunkName: "create_proto" */'@/pages/activities/create_proto')
},
{
path: '/activities/create/:id',
name: 'create',
meta: {
index: 2,
title: '活动创建',
keepAlive: true, //此组件不需要被缓存
isBack:false, //用于判断上一个页面是哪个
rank:1.5,
},
component: () =>
import (/* webpackChunkName: "create" */'@/pages/activities/create')
}, {
path: '/activities/createMask',
name: 'createMask',
meta: {
index: 2,
title: '组',
keepAlive: false, //此组件不需要被缓存
isBack:false, //用于判断上一个页面是哪个
rank:1.5,
},
component: () =>
import (/* webpackChunkName: "createMask" */'@/pages/activities/createMask')
},
让B页面始终是缓存,
然后在B页面 就是 create页面 里:
beforeRouteEnter(to,from,next){
//来自editNotic的不缓存
if(from.name === 'createMask' && to.name === 'create'){
to.meta.isBack = true;
}
next();
},
activated() {
// console.log(this.$route.meta)
if(!this.$route.meta.isBack || this.isFirstEnter){
// 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
this.getApi();
}
// 恢复成默认的false,避免isBack一直是true,导致下次无法获取数据
this.$route.meta.isBack=false;
//this.isBack = false;
this.isFirstEnter = false;
},
beforeCreate() {
this.$loading.open();
}, mounted(){
this.isFirstEnter = true;
this.getApi();
},
解释一波
Vue.mixin({
beforeRouteLeave: function (to, from, next) {
console.log(to)
if (from && from.meta.rank && to.meta.rank && from.meta.rank > to.meta.rank) { //如果返回上一层,则摧毁本层缓存。
if (this.$vnode && this.$vnode.data.keepAlive) {
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
if (this.$vnode.componentOptions) {
var key = this.$vnode.key == null ?
this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '') :
this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key]) {
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
})
就是强制清除缓存,哇,这个问题搞了半天,
然后就解决了前进刷新,后退不刷的问题,
当然还可以结合vuex 来做到效果,但数据比较大的话还是适合 我写的这种吧,哈哈哈
Vue 页面 前进刷新 后退不刷新(keepAlive)的更多相关文章
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)
keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...
- vue 前进刷新后退不刷新
这边是router-view部门的写法: <keep-alive> <router-view v-if="$route.meta.keepAlive"/> ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 玩转vue前进刷新,后退不刷新and按需刷新
大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...
- vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析
需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表. 而浏览器的机制则是每一次的页面打开都会重新 ...
- Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
- 单页应用后退不刷新方案(vue & react)
引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...
随机推荐
- nginx 增加认证
1.检查工具是否安装,如果未安装则使用yum安装 #htpasswd 有以上输出表示已经安装,如果没有按装,使用如下命令安装: #yum -y install httpd-tools 2.htpass ...
- 智能指针分析及auto_ptr源码
简介 C++没有内存自动回收机制,对堆内存的管理就是简单的new和delete,每次new出来的内存都需要手动delete释放.但由于忘记.流程复杂或者异常退出等,都有可能导致没有执行delete释放 ...
- 【LOJ】#3083. 「GXOI / GZOI2019」与或和
LOJ#3083. 「GXOI / GZOI2019」与或和 显然是先拆位,AND的答案是所有数字为1的子矩阵的个数 OR是所有的子矩阵个数减去所有数字为0的子矩阵的个数 子矩阵怎么求可以记录每个位置 ...
- 在ASP.NET Core 2.0中使用Facebook进行身份验证
已经很久没有更新自己的技术博客了,自从上个月末来到天津之后把家安顿好,这个月月初开始找工作,由于以前是做.NET开发的,所以找的还是.NET工作,但是天津这边大多还是针对to B(企业)进行定制开发的 ...
- 区间DP(入门)括号匹配
https://www.nitacm.com/problem_show.php?pid=8314 思路:类似于https://blog.csdn.net/MIKASA3/article/details ...
- 并不对劲的CF1237D&E:Balanced Playlist and Binary Search Trees
CF1237D Balanced Playlist 题意 有一个长度为\(n\)(\(n\leq 10^5\))的循环播放歌单,每首歌有一个优秀值\(a_i\)(\(a_i\leq 10^9\)). ...
- 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法
在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...
- redis 学习(17) -- RDB
redis -- RDB 什么是 RDB 经过RDB之后,redis会将内存中的数据创建一份快照到硬盘中,称为RDB文件(二进制) 当redis重新启动时,会加载硬盘中的RDB文件,加载到内存中完成数 ...
- [转载]为什么用Java开发桌面程序的比较少
这个是本人这几天用javafx开发桌面程序时候想到的,因为虽然javafx比C#之类的确实坑多不少,但是习惯了之后也还行,而且它的一次编译.各处使用真的深得我心.但为什么不流行呢: 作者:bell 来 ...
- javascript相关的增删改查以及this的理解
前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...