欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue之keep-alive缓存动态组件的使用

程序员文章站 2024-02-24 23:15:34
原 vue之keep-alive缓存动态组件的使用 在业务开发中,会有路由跳转但是返回需要保留数据的场景(如:列表页的加载);vue 中提供了 keep-alive 来处理 解决方案 返回dom不...

vue之keep-alive缓存动态组件的使用

在业务开发中,会有路由跳转但是返回需要保留数据的场景(如:列表页的加载);vue 中提供了 keep-alive 来处理

解决方案

返回dom不让其重新刷新,在vue-view外面包一层,
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中;
可以将 是否包裹 keep-alive 通过参数配置;


    


//不需要刷新的路由配置里面配置 meta: {keepalive: true}, 这个路由则显示在上面标签;
//需要刷新的路由配置里面配置 meta: {keepalive: false}, 这个路由则显示在下面标签;