您好,登录后才能下订单哦!
今天就跟大家聊聊有关vue keep-alive实现多组件嵌套中个别组件存活不销毁的方法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
配置路由加以判断是否使用keep-alive
MVideoUpload,MFileUpload为上传文件组件,故想之存活,而其他组件则需要挂起刷新数据,但由于MVideoUpload,MFileUpload分别嵌套在MVideos,MFiles组件中,为了保证跳转其他模块组件的时候,上传视频和上传文件的模块不销毁(因为一旦父组件销毁,子组件自然也销毁了),所以两个父组件也需要存活,只是之后需要再加以判断存活那几个子组件。
路由js:
{ path:'resource', name:'MResource', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/Resource'), children:[ { path: 'videos', name: 'MVideos', meta:{ keepAlive:true, //包含存活组件 auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/videos/Videos'), children:[ { path:'list', name:'MVideoList', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/videos/VideosList'), }, { path:'upload', name:'MVideoUpload', meta:{ keepAlive:true, //需要存活 auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/videos/UploadVideo'), }, { path:'update', name:'MVideoUpdate', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/videos/UpdateVideo'), }, { path:'detail', name:'MVideoDetail', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/videos/VideoDetail'), }, ], redirect:{name: 'MVideoList'} }, { path:'files', name:'MFiles', meta:{ keepAlive:true, //包含存活组件 auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/files/Files'), children:[ { path: 'list', name: 'MFileList', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/files/FilesList'), }, { path:'upload', name:'MFileUpload', meta:{ keepAlive:true, //需要存活 auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/files/UploadFile'), }, { path:'update', name:'MFileUpdate', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/files/UpdateFile'), }, { path:'detail', name:'MFileDetail', meta:{ auth:true //是否需要登录 }, component: () => import('../pages/manage/resource/files/FileDetail'), }, ], redirect:{name: 'MFileList'} }, ], redirect:{name: 'MFiles'} },
各父组件都是如此:
一层层判断哪些组件需要存活不销毁,从而实现对任意一个组件切换组件时使其存活不销毁。
<transition name="component-fade" mode="out-in"> <keep-alive> <router-view v-if="$route.meta.keepAlive" /> </keep-alive> </transition> <transition name="component-fade" mode="out-in"> <router-view v-if="!$route.meta.keepAlive" /> </transition>
补充知识:vue页签模式+keep-alive解决关闭页签后缓存组件未销毁问题
1.简介
vue使用页签模式,组件使用keep-alive缓存,发现页签关闭后缓存组件未销毁,只是出于非活动状态
2.解决
使用keep-alive的include属性,这个属性包含了缓存组件的名称,可以将其赋值为动态属性
页签store
export default { state: { current: layui.data('tag').current || {},//当前页签 list: layui.data('tag').list || []//页签列表 }, getters:{ /** 标签名称列表 */ tagNames (state) { return state.list.map(function(tag){return tag.name}) } } }
list是页签对象列表
tagNames为页签名称列表,即要缓存的页签组件名称
<keep-alive v-if="isRouterAlive" :include="tagNames"> <router-view ></router-view> </keep-alive> ...mapGetters({ tagNames:'tagNames' })
看完上述内容,你们对vue keep-alive实现多组件嵌套中个别组件存活不销毁的方法有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。