nuxtjs的nuxt标签使用用keep-alive和keep-alive-props

2021-03-03 16:10:42

nuxt.js 列表界面分页加载后进入详情页,返回上一页如何让界面不重新加载


我们可以使用keep-alive标签,到底应该怎么使用呢。

官方文档地址为 The Nuxt Component


1、在标签上添加属性

<nuxt  keep-alive :keep-alive-props="{ include: includeArr }" />


// js

data () {

return {

includeArr: ['cardApplyQuery'] // 需要缓存的组件名数组

}

}


2、在组件中添加name属性

这个是好多网上教程没有点明的,这里重点提出。一定要在组件中加上对应的name


export default {

name: 'cardApplyQuery'

}


其他 expend 等属性也是支持的。不详细列出。



  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示:

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解,现在主流的ORM框架很多,比如OrmLite,GreenDao,Active Android,Realm等等,这些框架每个都有自己的优点和缺点,大家完全可以根据自己项目的实际需求进行选择,下面开始进入今天的数据库模块的介绍。

  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding,是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR。一般地,这时往往会弹出一个提示框,告知用户当前xxx未响应,用户可选择继续等待或者Force Close。