1. <keep-alive>
  2. <component v-bind:is="view"></component>
  3. </keep-alive>

专属生命周期

  1. activited keep-alive专属,组件被激活时调用
  2. deadctivated keep-alive专属,组件被销毁时调用

用于子组件缓存,可以让子组件缓存还是不缓存

  1. <!-- 失活的组件将会被缓存!-->
  2. <keep-alive>
  3. <component v-bind:is="currentTabComponent"></component>
  4. </keep-alive>
网上找的很不错,
1、直接使用

  1. <keep-alive>
  2. <component>
  3. <!-- 该组件将被缓存! -->
  4. </component>
  5. </keep-alive>
  • include - 字符串或正则表达,只有匹配的组件会被缓存
  • exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
    1. // 组件 a
    2. export default {
    3. name: 'a',
    4. data () {
    5. return {}
    6. }
    7. }
    1. <keep-alive include="a">
    2. <component>
    3. <!-- name 为 a 的组件将被缓存! -->
    4. </component>
    5. </keep-alive>可以保留它的状态或避免重新渲染

    需要router

    1. <keep-alive>
    2. <router-view>
    3. <!-- 所有路径匹配到的视图组件都会被缓存! -->
    4. </router-view>
    5. </keep-alive>
    • 使用 include/exclude
    • 增加 router.meta 属性
      1. // 组件 a
      2. export default {
      3. name: 'a',
      4. data () {
      5. return {}
      6. }
      7. }
      1. <keep-alive include="a">
      2. <router-view>
      3. <!-- 只有路径匹配到的视图 a 组件会被缓存! -->
      4. </router-view>
      5. </keep-alive>

      增加router属性

      1. // routes 配置
      2. export default [
      3. {
      4. path: '/',
      5. name: 'home',
      6. component: Home,
      7. meta: {
      8. keepAlive: true // 需要被缓存
      9. }
      10. }, {
      11. path: '/:id',
      12. name: 'edit',
      13. component: Edit,
      14. meta: {
      15. keepAlive: false // 不需要被缓存
      16. }
      17. }
      18. ]
      1. <keep-alive>
      2. <router-view v-if="$route.meta.keepAlive">
      3. <!-- 这里是会被缓存的视图组件,比如 Home! -->
      4. </router-view>
      5. </keep-alive>
      6.  
      7. <router-view v-if="!$route.meta.keepAlive">
      8. <!-- 这里是不被缓存的视图组件,比如 Edit! -->
      9. </router-view>

      分析一个写的很详细的地方:很详细https://www.jianshu.com/p/0b0222954483

vue中keep-alive路由缓存的更多相关文章

  1. vue中怎样实现 路由拦截器

    vue中怎样实现 路由拦截器(当用户没有登录的时候,跳转到登录页面,已经登录的时候,不能跳转到登录页,除非后台token失效) 在 我们需要实现这样 一个功能,登录拦截 其实就是 路由拦截,首先在定义 ...

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

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

  3. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  4. vue中的静态路由

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面 ...

  5. 060——VUE中vue-router之路由嵌套在文章系统中的使用方法:

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

  6. 059——VUE中vue-router之路由嵌套在文章系统中的使用方法:

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

  7. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  8. vue 中 相同的路由不会跳转,更改路由的办法

    vue 开发的项目,路由跳转的时候,是相同的路由是不会跳转,页面也不会有更新的 有时候 必须要跳转怎么办, 更改一个参数,num,一直在改变.就可以进入了. this.$router.push({ p ...

  9. 057——VUE中vue-router之路由参数默认值的设置

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

  10. 056——VUE中vue-router之路由参数的验证处理保存路由安全

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

随机推荐

  1. Hibernate3核心API使用

    public static void main(String[] args) throws Exception{ // 1. 加载默认的hibernate.cfg.xml的配置文件 Configura ...

  2. RabbitMQ学习之:(十一)AMQP.0-10规范,中文翻译1,2,3章 (转载)

    From:http://blog.sina.com.cn/s/blog_4aba0c8b0100p6ho.html From: http://blog.sina.com.cn/s/blog_4aba0 ...

  3. 原生vue实现表格的编辑,包括单元格合并,拆分,删除行/列, 添加行/列

    先看效果图如下:  代码看这里: https://github.com/YalongYan/vue-table-edit

  4. IDEA使用git

    本文转自:http://www.cnblogs.com/java-maowei/p/5950930.html 一.安装git 下载地址:  https://git-scm.com/download/w ...

  5. powerdesigner使用遇到的一些问题

    1.数据库逆向生成er图时,连接数据库问题 由于powerdesigner版本是32位,可能就导致不兼容64位的机器,导致连接mysql失败: 解决方法:方法1.重新配置32位jdk 方法2.mysq ...

  6. 安装python3.6并使用virtualenvwrapper管理虚环境

    1.安装python3.6.5依赖环境 注:python3.7.4需要安装:yum install libffi-devel -y yum install gcc patch libffi-devel ...

  7. 李宏毅 Keras2.0演示

    李宏毅 Keras2.0演示 不得不说李宏毅老师讲课的风格我真的十分喜欢的. 在keras2.0中,李宏毅老师演示的是手写数字识别(这个深度学习框架中的hello world) 创建网络 首先我们需要 ...

  8. 【VS开发】CFormView

    原文地址:CFormView作者:罗纳尔多 CFormView是MFC使用无模式对话框的一个典型例子.CFormView是基于对话框模板创建的视,它的直接基类是CSrcollView,CSrcollV ...

  9. vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法

    参考资料:https://blog.csdn.net/zy21131437/article/details/99548983

  10. 性能排查--CPU占用高

    排查思路: 1.先找到占用CPU高的进程PID    top命令 2.top -H -p <PID>  查看哪个占用CPU高的线程TID 3.jstack <PID>  /ho ...