Vue中的keep-alive组件
keep-alive
- router-view 也是一个组件,如果直接被包在keep-alive里面,所有路径匹配到的视图组件都会缓存,
保持生存
- keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
属性 | 描述 |
---|---|
include(包含) | 字符串或正则表达式,只有匹配的组件会被缓存 |
exclude(不包含) | 字符串或者正则表达式,任何匹配的组件都不会被缓存 |
<keep-alive exclude="profile,User"><router-view></router-view></keep-alive>
上面这行代码将会把
name属性值
为profile
和user
的两个组件对于keep-alive
排除在外,是他们可以正常的被创建和销毁。
当有多个组件是,需要用逗号将他们隔开,切记,不要加空格或者其他符号
:第二个组件没有生效,只有第一个组件有用。
使用keep-alive标签将要保存live的组件包裹起来
router -view 也是一个组件,如果直接被包括在keep-alive里面,所有的路劲匹配到的视图组件都会被缓存。
<keep-alive><router-view></router-view></keep-alive>
小问题(学习老师的解决问题的思路)
问题讲解
<script>export default {name: '',data(){return{message:'你好呀',path:'/home/news'}},//实例创建后开始执行created(){// document.title='首页'console.log(' home created');},//将tamplate等模板相关的东西被挂载到DOM就会回调这个生命周期函数// mounted(){// console.log('mounted')// },// //界面发生刷新后就会回调// update(){// console.log('update')// }destroyed(){console.log(' home destrotyed')},// 这两个函数只有该组件使用了keep-alive时才有效activated(){console.log(this.path);this.$router.push(this.path);},beforeRouteLeave(to,from,next){console.log(this.$route.path)this.path = this.$route.path;next();}}
</script>
在home组件中使用path变量保存路径,然后使用
beforeRouteLeave
保存路由跳出的url,使用activated
在下一次活跃路由时,将url定向到原来跳出的地点。
Vue生命周期讲解
Vue中的keep-alive组件相关推荐
- [vue] vue中什么是递归组件?举个例子说明下?
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主 ...
- class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
- vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
- 有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装 安装 第一步:在官网下载QJ_FileCenter安装包 第二部:访问FileCente ...
- vue中,右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果 右键菜单之禁用和子菜单 2.流程 第一步:安包 npm install v-contextmenu --save-dev npm in ...
- Vue中如何扩展⼀个组件
Vue中如何扩展⼀个组件 按照逻辑扩展和内容扩展来列举: 逻辑扩展有:mixins.extends.composition api: 内容扩展有: slots: 一.Mixin 组件和组件之间有时候会 ...
- vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
- vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
- vue中使用FullCalendar日历组件
官方地址:https://fullcalendar.io/ 官方vue文档(比较简洁而且是英文的):https://fullcalendar.io/docs/vue 中文文档(jquery版本)地址: ...
- vue中dom元素和组件的获取
Vue中获取DOM元素 <div id="app"><input type="button" value="获取元素" @ ...
最新文章
- 解决VC++ Error spawning cl.exe 问题·
- SQL Server的链接服务器技术小结
- 中国首个海底数据中心样机测试数据揭晓,达世界先进能效水平
- sqlserver游标概念与实例全面解说
- 灰度重采样(Gray Resampling
- leetcode236 二叉树的最近公共祖先
- mysql8修改密码
- python 释放链表节点_四种常见链表的实现及时间复杂度分析(Python3版)
- linux tcp 监控,Zabbix 监控tcp连接的状态
- Inside Dynamics Axapta源代码赏析(三)
- linux安装离线docker包教程,Centos7离线安装Docker环境
- opencv for android(三):使用opencv摄像头竖屏和前后切换
- Geant4学习一:写一个简单程序
- 荣耀8 google play store 安装程序
- vue的methods里面的函数使用箭头函数
- 计算机科学与技术选修课方向,计算机与科学专业主要的课程和学习方向是什么?...
- Imu_heading源码阅读(三)——Ransac_fitline部分
- 思科下一代模拟器EVE-NG安装
- 量子计算机论坛,IBM量子计算机取得重大突破
- android 仿蘑菇街首页,高仿蘑菇街欢迎页
热门文章
- Mysql数据库轻松学06—数据分析师常用:数据查询语言DQL之单表查询
- regin,clip Android
- 2018电赛手势识别比赛经历
- 用editplus删除csv文件中的软回车
- FX:{6630f2d7-bd52-4072-bfa7-863f3d0c5da0}
- Go语言编程笔记16:存储数据
- oracle对某两列求和再求和_分手后4个阶段这样挽回,再狠的他也会心软求和
- 华为WeAutomate RPA产品首席规划师周为:企业数智化转型之路,RPA共创新价值
- Android安全相关
- 量子计算机 国外大学,全球首款纯硅量子计算机芯片在新南威尔士大学诞生