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. Python中单引号,双引号,3个单引号及3个双引号的区别

    单引号和双引号在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有任何区 ...

  2. spring mvc+mybatis 构建 cms + 实现UC浏览器文章功能

    最近公司在模拟UC浏览器做一个简单的cms系统,主要针对于企业内部的文章浏览需求,这边考虑用户大多用mobile浏览文章内容,故使用原生的ios和android进行开发,后面也会集成html5. 1. ...

  3. HTML中调用JavaScript的几种情况和规范写法

    JavaScript执行在html中,引用有几种方式? 我知道的方法有3种: 第一种:外部引用远程JavaScript文件.如<script type="text/javascript ...

  4. Java集合:HashSet的源码分析

    Java集合---HashSet的源码分析   一.  HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该 ...

  5. Codeforces 1114 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 传送门 然而这场div2div2div2没有什么难度比较大的题 A题 传送门 题意简述:三个人分别至少选x,y,zx,y,zx,y,z件物品,有三种物品数 ...

  6. w9 Ansible批量管理与维护

    Ansible是2013年推出的一种通用自动化工具,可用于配置管理或工作流程自动化.配置管理是一种“基础架构代码”实践,它将事物编码,例如应该在系统上安装什么包和版本,或者应该运行什么守护进程.工作流 ...

  7. 用Rider写一个有IOC容器Autofac的.net core的程序

    一:Autofac是一个和Java里的Spring IOC容器一样的东西,不过它确实没有Spring里的那么方便,主要是在于它没有提供足够的Api和扫描方式等等,不过优点是它比Spring要快很多,而 ...

  8. Codeforces Round #512 E - Vasya and Good Sequences

    有时候觉得自己就是个思路搬运机,只会搬运思路 这个题首先说了求的是好区间的个数,  好区间满足条件: 1.二进制位1的数量和为偶数    2.w[i]表示a[i]的二进制上1的个数 ,sum[i] = ...

  9. 前端vue框架 脚手架

    1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...

  10. Winform嵌入CEF(非正常用法)

    (一)复制下面必备文件|-- locales|--en-US.pak|--cef.pak|--cef_100_percent.pak |--cef_200_percent.pak|--cef_exte ...