怎样建免费网站,网站显示危险网站要怎么做,品牌企业建站,哪里有培训网页设计缓存组件keep-alive
1.组件作用
组件, 默认会缓存内部的所有组件实例#xff0c;当组件需要缓存时首先考虑使用此组件。
2.使用场景
场景1#xff1a;tab切换时#xff0c;对应的组件保持原状态#xff0c;使用keep-alive组件
使用#xff1a;KeepAlive | Vu…缓存组件keep-alive
1.组件作用
组件, 默认会缓存内部的所有组件实例当组件需要缓存时首先考虑使用此组件。
2.使用场景
场景1tab切换时对应的组件保持原状态使用keep-alive组件
使用KeepAlive | Vue.js参考官网即可。
场景2路由切换回来时如果需要保持当前路由界面下的状态就需要使用缓存。
使用
1.定义路由时添加字段标识 isKeepAlive防止缓存所有路由 {path: /home,name: home,component: /home/index,label: 首页,meta: {icon: home,title: 首页,isKeepAlive: false}}2.使用 router-view/
!--如果字段标识缓存就缓存否则不缓存--
!--$route表示路由信息--
router-view v-slot{ Component }keep-alivecomponent :isComponent v-if$route.meta.isKeepAlive :key$route.fullPath //keep-alivecomponent :isComponent v-if!$route.meta.isKeepAlive :key$route.fullPath /
/router-view3.可能的报错
报错内容parentComponent.ctx.deactivate is not a function
解决: 给component添加key属性否则在触发deactivate钩子时会出问题
