keep-alive用法

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/home/home'
import Header from '@/components/home/header'
import Citylist from '@/components/city/city-list' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
},
{
path: '/Header',
name: 'Header',
component: Header,
meta: {
keepAlive: true // 需要被缓存
}
},
{
path:'/citylist',
name:'citylist',
component:Citylist,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
})

这样就需要在app.vue中这样写

<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template> <script>
export default {
name: 'App'
}
</script> <style>
</style>

这样就实现了有效的控制是否缓存。

activated,deactivated

注意一点:activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中, activated 中的不管是否需要缓存多会执行。

vue-cli keep-alive用法以及activated,deactivated的更多相关文章

  1. keep-alive 用法 及activated,deactivated这两个生命周期函数

    keep-aliveProps: include - 字符串或正则表达式.只有名称匹配的组件会被缓存.exclude - 字符串或正则表达式.任何名称匹配的组件都不会被缓存.max - 数字.最多可以 ...

  2. keep-alive用法及(activated,deactivated生命周期)

    <template> <div id="app"> <!-- <img src="./assets/logo.png"> ...

  3. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  4. [WIP]Vue CLI

    更新: 2019/05/30 文档: https://cli.vuejs.org/zh/  安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础   ...

  5. Vue CLI 3.x 简单体验

    文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...

  6. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  7. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

  8. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  9. Vue CLI及其vue.config.js(一)

    有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...

随机推荐

  1. ORM初识和数据库操作

    ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使用描述对象和数据库之 ...

  2. Connection lost: The server closed the connection

    想必很多初学者都会遇到这个问题 其实很简单.mysql有个机制,就是8小时无通信,myslq就会自动关闭数据; 解决方案(2选1): 或者: 1.定时去做一个查询,就是 select * from X ...

  3. SQL学习(一.索引)

    数据库索引 作用: 提高查询速度 确保数据的唯一性 可以加速表和表之间的连接,实现表和表之间的参照完整性 使用分组和排序子句进行数据检索时,可以减少分组和排序的时间 全文检索字段进行搜素优化 分类: ...

  4. 使用android访问SQLServer数据库

    1.SQL驱动 下载可以支持android的SQL驱动,下载地址http://sourceforge.net/projects/jtds/files/ 注意只能下载1.2.7版本.android不支持 ...

  5. Java:Hashtable

    概要 前一章,我们学习了HashMap.这一章,我们对Hashtable进行学习.我们先对Hashtable有个整体认识,然后再学习它的源码,最后再通过实例来学会使用Hashtable.第1部分 Ha ...

  6. Testng用例失败重新运行

    Testng用例失败重新运行   在ui测试用例的运行过程中,发现有很多不确定的因素会导致用例失败,比如网络原因,比如屏幕滑动失败等.想到需要让测试用例,在失败后重新运行来提高测试成功率. 在gith ...

  7. ABP框架系列之二十:(Dependency-Injection-依赖注入)

    What is Dependency Injection If you already know Dependency Injection concept, Constructor and Prope ...

  8. IDA显示字节机器码

    默认居然不显示,有点坑. 要像CE一样显示出来,需要 菜单 Options >> General Disassembly选项卡Number of opcode bytes写上非0,写1好像 ...

  9. 第一节 —— vue2.0 环境安装,工程化开发

    vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack. 所以另一种方法也就是基于 ...

  10. noip第23课资料