前言

遇到这一个个问题  需要是这样的 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();
},

解释一波

缓存的页面 created 会执行只有一次,activated每次都会执行 ,
created 里面做 第一次 isFirstEnter = true(由于页面被缓存,所以一直生效),之后再activated 里面做判断
只有 “不是返回回来的” 和 “第一次进来的” 就刷新数据, 并且要在下面 都设为false, 以免缓存各标识不对,
在进入 “列表页” 时,通过router钩子函数 beforeRouteEnter做判断,
详情页过来的设 isBack 为true,即不刷新页面
 
但第一次都是不生效的,查阅了github 上的大佬方法,就是强制清除B缓存,当B页面离开去到A页面,用rank 来比较
在main.js 中 写入:
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)的更多相关文章

  1. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  2. vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)

      keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...

  3. vue 前进刷新后退不刷新

    这边是router-view部门的写法: <keep-alive> <router-view v-if="$route.meta.keepAlive"/> ...

  4. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  5. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. 玩转vue前进刷新,后退不刷新and按需刷新

    大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...

  7. vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析

    需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表. 而浏览器的机制则是每一次的页面打开都会重新 ...

  8. Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta

    Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...

  9. 单页应用后退不刷新方案(vue & react)

    引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...

随机推荐

  1. nginx 增加认证

    1.检查工具是否安装,如果未安装则使用yum安装 #htpasswd 有以上输出表示已经安装,如果没有按装,使用如下命令安装: #yum -y install httpd-tools 2.htpass ...

  2. 智能指针分析及auto_ptr源码

    简介 C++没有内存自动回收机制,对堆内存的管理就是简单的new和delete,每次new出来的内存都需要手动delete释放.但由于忘记.流程复杂或者异常退出等,都有可能导致没有执行delete释放 ...

  3. 【LOJ】#3083. 「GXOI / GZOI2019」与或和

    LOJ#3083. 「GXOI / GZOI2019」与或和 显然是先拆位,AND的答案是所有数字为1的子矩阵的个数 OR是所有的子矩阵个数减去所有数字为0的子矩阵的个数 子矩阵怎么求可以记录每个位置 ...

  4. 在ASP.NET Core 2.0中使用Facebook进行身份验证

    已经很久没有更新自己的技术博客了,自从上个月末来到天津之后把家安顿好,这个月月初开始找工作,由于以前是做.NET开发的,所以找的还是.NET工作,但是天津这边大多还是针对to B(企业)进行定制开发的 ...

  5. 区间DP(入门)括号匹配

    https://www.nitacm.com/problem_show.php?pid=8314 思路:类似于https://blog.csdn.net/MIKASA3/article/details ...

  6. 并不对劲的CF1237D&E:Balanced Playlist and Binary Search Trees

    CF1237D Balanced Playlist 题意 有一个长度为\(n\)(\(n\leq 10^5\))的循环播放歌单,每首歌有一个优秀值\(a_i\)(\(a_i\leq 10^9\)). ...

  7. 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法

    在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...

  8. redis 学习(17) -- RDB

    redis -- RDB 什么是 RDB 经过RDB之后,redis会将内存中的数据创建一份快照到硬盘中,称为RDB文件(二进制) 当redis重新启动时,会加载硬盘中的RDB文件,加载到内存中完成数 ...

  9. [转载]为什么用Java开发桌面程序的比较少

    这个是本人这几天用javafx开发桌面程序时候想到的,因为虽然javafx比C#之类的确实坑多不少,但是习惯了之后也还行,而且它的一次编译.各处使用真的深得我心.但为什么不流行呢: 作者:bell 来 ...

  10. javascript相关的增删改查以及this的理解

    前两天做了一个有关表单增删改查的例子,现在贴出来.主要是想好好说一下this. 下面贴一张我要做的表格效果. 就是实现简单的一个增删改查. 1.点击增加后自动增加一行: 2.点击保存当前行会将属性改成 ...