Vue中的keep-alive应用

Snipaste_20210330_175949.jpg
keep-alive是后台管理系统中基本,他会缓存不活动的组件实例,而不是销毁它们。

应用:

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div>

VueRouter的代码

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
{ path: "/goodslist", name: "goodslist", component: () =>import("../views/goods/goodslist.vue"), meta: { keepAlive: true }, },

上面这段代码用来区分使用keep-alive的页面和非使用的页面。

实际情况有时候还会需要计入滚动条的位置。 这时要用到activated,deactivated生命周期

可以在全局变量中记录一个滚动条位置scrolly_table,在跳转页面时记录一下scrolly_table。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
activated() { //进入时读取位置 console.log('进入', scrolly_table); this.$refs.table_list.bodyWrapper.scrollTop = scrolly_table; }, deactivated(){ //离开时记录位置 console.log('离开') },
(完)
成都3日游
春熙路太古里 - 九眼桥 - 望平街,熊猫基地 - 文殊院 - 宽窄巷子 - 锦里,成都博物馆 - 少城小学 - 人民公园
年纪大了,该转行程序员吗?
Do your own research , Make educated choice
Xray+Nginx配置健康上网并快速搭建或迁移搭建博客站点
本文介绍Docker+Nuxt+python+mongo快速搭建,不要看首图,首图因为刚好520。
随便谈谈最近股市
全网都是AI了吧
Docker基本操作
一些基本操作,指令
webpack4.0基本的一些配置记录
再复习一遍总结了下,记是记不住了
等待你的评论