每次使用返回是页面总是会刷新 导致了一些体验上的不愉快

现在 发现vue中的一个很方便的方法还可以用来优化性能就是：

keep-alive缓存组件

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

<keep-alive>

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

</keep-alive>

这边我是用作缓存页面，返回不刷新，这里我只缓存keepAlive的值为true的页面

在路由的meta属性加入keepAlive，希望缓存的页面加入vue属性即可

如果需要改变时在

beforeRouteEnter，beforeRouteLeave中写入事件即可

如果页面需要再加载数据则activated事件中写入你的方法

vue的组件缓存（返回页面不刷新）的更多相关文章

  1. vue中keepAlive的用法[返回页面不刷新]

    本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...

  2. vue中如何缓存一些页面

    在vue中,有时候我们只想缓存页面中的一些组件或页面,这个时候怎么办呢,我们就需要用判断来加载keep-alive. 例如: // router.js { path: "/driving_l ...

  3. 关于微信小程序返回页面时刷新页面的实现

    在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新 ...

  4. vue tab栏缓存解决跳转页面后返回的状态保持

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  5. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  6. Vue keep-alive如何实现只缓存部分页面

    prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓存. 在2.1.0版本Vue中 常见用法: // 组件 exp ...

  7. Vue 页面 前进刷新 后退不刷新（keepAlive）

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  8. angular页面缓存与页面刷新

      angularJS学习笔记:页面缓存与页面刷新 遇到的问题 现在存在这样一个问题,登录前与登录成功后是同一个页面,只不过通过ngIf来控制哪部分显示,图像信息如下: 所以,整体工作不是很难,无非就 ...

  9. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

随机推荐

  1. 【2019牛客暑期多校第一场】E题ABBA

    题目链接 大致题意 有(n+m)(n + m)(n+m)个字母A和(n+m)(n + m)(n+m)个字母B,组成一个长度为 2∗(n+m)2*(n + m)2∗(n+m)的字符串,并且使得字符串中有 ...

  2. 【bug】table重新加载数据，页面滚动条下沉到底部，记录scrollTop后将其恢复scrollTop出现闪烁

    1.table数据请求前记录scrollTop $scope.scrollPos = document.documentElement.scrollTop; 2.html中添加指令repeat-fin ...

  3. Python第五章-内置数据结构04-字典

    Python 内置的数据结构 四.字典(dict) 字典也是 python 提供给我们的又一个非常重要且有用的数据结构. 字典在别的语言中有时叫关联数组.关联内存.Map等. 字典中存储的是一系列的k ...

  4. Building Applications with Force.com and VisualForce (DEV401) （二五）：Visualforce Controller

    Dev401-026:Visualforce Pages: Visualforce Controller   Module Objectives1.Identify the functionality ...

  5. nltk 中的 sents 和 words

    nltk 中的 sents 和 words ,为后续处理做准备. #!/usr/bin/env python # -*- coding: utf-8 -*- from nltk.corpus impo ...

  6. DrQA 阅读维基百科来回答开放问题 Reading Wikipedia to Answer Open-Domain Questions

    DrQA 是一个阅读理解系统用在开放领域问答.特别的,DrQA 针对一个机器阅读任务.在这个列表里,我们为一个潜在非常大的预料库中搜索一个问题的答案.所以,这个系统必须结合文本检索和机器文本理解. 项 ...

  7. PHP7内核（四）：生命周期之开始前的躁动

    上一章我们对PHP的源码目录结构有了初步了解,本章我们继续从生命周期的维度对PHP进行剖析. 一.概览 生命周期是什么呢?你可以把它看作执行过程,PHP的生命周期也就是它从开始执行到结束执行的过程. ...

  8. ArcGIS中影像图去黑边

    通常情况下有些影像图的背景会显示黑色,所以需要将影像图的格式转换一下,将黑色背景转换为透明色.具体去除河边的步骤如下: 1.在catalog中,选中要转换的影像图: 2.右键——导出——将栅格导出为不 ...

  9. [codevs3118]高精度除法<高精度>

    题目链接:http://codevs.cn/problem/3118/ 为了做一道名为国王游戏的贪心,我跑来学习了高精度除法....相传,高精度除法是高精度四个基本运算最难的 但事实上,高精度除法可以 ...

  10. opentsdb探索之路——部分设计与实现

    opentsdb 概览(overview) opentsdb 存储细节(Writing) rowkey的设计 rowkey的具体实现 压缩(compaction) 追加模式(appends) open ...