项目需求:从项目列表页index,进入到列表的详情页detail,再从detail返回到index,需要缓存index的数据

在App.vue中的配置

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

在router中meta上添加 keepAlive: true

配置完成后,从detail 返回 index 缓存了之前的数据,达到了预期的效果!

但接着问题来了,从其他页面进入到index也取了缓存的数据,没有重新请求~~

解决思路:从路由守卫下手

在这里我们需要用到路由的beforeRouteLeave钩子函数

在需要缓存的页面 index 加上下面这段代码:

最后,测试,正是我要的效果,完美!

vue中使用keepAlice的各种问题的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. nodejs process uncaughtException

    用过Node一段时间之后,发现那些在事件主循环里碰到的异常会导致Node进程退出.在许多应用场景下,特别是对那些希望永不当机的服务器程序来说,这都是不接受的.uncaughtException事件会提 ...

  2. 【linux运维】Linux服务器玩转vsftpd安装与配置

    Linux服务器搭建ftp详细教程. 前言 本文,主要以vsftp软件为主进行讲解,版本为3.0.2.以介绍设置虚拟用户.权限验证为主,linux权限知识默认大家都有所了解.vsftpd设置有两种模式 ...

  3. Vue项目中实现文件下载到本地的功能

    公司业务需求,我需要实现一个合同模板,自定义输入内容后生成合同随后导出下载合同.(自定义部分用到的是) 为了实现这个文件下载到本地的功能,真的是废了九牛二虎之力,以至于差点放弃(主要还是自己菜).刚开 ...

  4. Ubuntu18修改系统时间

    1. 运行 tzselect 依次选择 Asia -> China -> Beijing Time 2. 复制文件到 /etc 下 sudo cp /usr/share/zoneinfo/ ...

  5. 拔掉网线后, 原本的 TCP 连接还存在吗?

    大家好,我是小林. 今天,聊一个有趣的问题:拔掉网线几秒,再插回去,原本的 TCP 连接还存在吗? 可能有的同学会说,网线都被拔掉了,那说明物理层被断开了,那在上层的传输层理应也会断开,所以原本的 T ...

  6. 北京太速科技-6U VPX 6槽 Full Mesh结构背板机箱

    一.产品概述 Ori6UVPX6SlotFullMesh264背板机箱 为 6U VPX 6槽 Full Mesh结构,用于实现PCIE.RapidIO IO 4X Full Mesh 高速数据互联, ...

  7. find 查询命令 & 正则表达式

    今日内容 find 正则表达式 Linux 三剑客之 grep 内容详细 一.find 按名称或属性查询文件 按名称查询 find [查找目录] [参数] [] 通配符 : * 表示匹配多个字符 ? ...

  8. Solution -「HNOI 2007」「洛谷 P3185」分裂游戏

    \(\mathcal{Description}\)   Link.   给定 \(n\) 堆石子,数量为 \(\{a_n\}\),双人博弈,每轮操作选定 \(i<j\le k\),使 \(a_i ...

  9. HTTP攻击与防范-PHP安全配置

    实验目的 1.了解PHP攻击带来的危险性. 2.掌握PHP攻击的原理与方法 3.掌握防范攻击的方法 实验原理 由于网站服务器是以单一系统使用者的模式在运行,因此这个系统的使用者账号必须能够读取每个使用 ...

  10. BI数据可视化工具怎么选?用这款就够了!

    任何一项产品的选择都需要谨慎而全面,BI数据可视化工具的选择就更不用说了.作为企业的IT部门,如果没有良好的BI工具支持,IT部门将会十分容易陷入困境.那么面对多元化的BI工具市场,IT部门该如何选择 ...