使用vue做后台管理的时候,经常会遇到复选框状态在路由跳转的时候就销毁了,我们希望在路由跳转时复选框的状态继续保持。使用vue自带的组件 keep-alive完美的解决。
先来看一下keep-alive的定义 vue官网对keep-alive介绍
在这里插入图片描述

使用方法

在APP.vue页面里添加 keep-alive

<keep-alive>
   <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive"></router-view>

在router里面定义一个meta 在里面定义一下当前页需要被缓存

{
 path: '/home',
 name: 'home',
 component: resolve => require(['@/components/home/home'], resolve),
 meta: {keepAlive: true // 需要被缓存
 }
},

这样就可以完美的实现路由跳转的时候我们需要保存的信息就被缓存下来了。

Logo

前往低代码交流专区

更多推荐