vue-cli keep-alive用法以及activated,deactivated
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的更多相关文章
- keep-alive 用法 及activated,deactivated这两个生命周期函数
keep-aliveProps: include - 字符串或正则表达式.只有名称匹配的组件会被缓存.exclude - 字符串或正则表达式.任何名称匹配的组件都不会被缓存.max - 数字.最多可以 ...
- keep-alive用法及(activated,deactivated生命周期)
<template> <div id="app"> <!-- <img src="./assets/logo.png"> ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- [WIP]Vue CLI
更新: 2019/05/30 文档: https://cli.vuejs.org/zh/ 安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础 ...
- Vue CLI 3.x 简单体验
文档 中文文档 补充于02月10日 vue脚手架的3.x版本已经在开发中,现在还处于alpha版本.我们来看看有哪些变化. 使用 npm install -g @vue/cli 命名方式已经改为npm ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- VUE CLI环境搭建文档
VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...
- Vue CLI及其vue.config.js(一)
有时候我们为了快速搭建一个vue的完整系统,经常会用到vue-cli,vue-cli用起来很方便而且命令简单容易上手,但缺点是在构建的时候我感觉有一些慢,因为CLI 服务 (@vue/cli-serv ...
随机推荐
- Python中单引号,双引号,3个单引号及3个双引号的区别
单引号和双引号在Python中我们都知道单引号和双引号都可以用来表示一个字符串,比如 str1 = 'python' str2 = "python" str1和str2是没有任何区 ...
- spring mvc+mybatis 构建 cms + 实现UC浏览器文章功能
最近公司在模拟UC浏览器做一个简单的cms系统,主要针对于企业内部的文章浏览需求,这边考虑用户大多用mobile浏览文章内容,故使用原生的ios和android进行开发,后面也会集成html5. 1. ...
- HTML中调用JavaScript的几种情况和规范写法
JavaScript执行在html中,引用有几种方式? 我知道的方法有3种: 第一种:外部引用远程JavaScript文件.如<script type="text/javascript ...
- Java集合:HashSet的源码分析
Java集合---HashSet的源码分析 一. HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持.它不保证set 的迭代顺序:特别是它不保证该 ...
- Codeforces 1114 简要题解
文章目录 A题 B题 C题 D题 E题 F题 传送门 然而这场div2div2div2没有什么难度比较大的题 A题 传送门 题意简述:三个人分别至少选x,y,zx,y,zx,y,z件物品,有三种物品数 ...
- w9 Ansible批量管理与维护
Ansible是2013年推出的一种通用自动化工具,可用于配置管理或工作流程自动化.配置管理是一种“基础架构代码”实践,它将事物编码,例如应该在系统上安装什么包和版本,或者应该运行什么守护进程.工作流 ...
- 用Rider写一个有IOC容器Autofac的.net core的程序
一:Autofac是一个和Java里的Spring IOC容器一样的东西,不过它确实没有Spring里的那么方便,主要是在于它没有提供足够的Api和扫描方式等等,不过优点是它比Spring要快很多,而 ...
- Codeforces Round #512 E - Vasya and Good Sequences
有时候觉得自己就是个思路搬运机,只会搬运思路 这个题首先说了求的是好区间的个数, 好区间满足条件: 1.二进制位1的数量和为偶数 2.w[i]表示a[i]的二进制上1的个数 ,sum[i] = ...
- 前端vue框架 脚手架
1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...
- Winform嵌入CEF(非正常用法)
(一)复制下面必备文件|-- locales|--en-US.pak|--cef.pak|--cef_100_percent.pak |--cef_200_percent.pak|--cef_exte ...