vue中keep-alive的使用

博主在做vue项目过程中设定的是组件在挂载时请求数据，这就会导致我在切换路由时在前组件的操作被清除，因为会重新挂载并请求数据。这明显不符合我们的预期，我们希望在一次程序的使用过程中进行的操作是一直有效的，keep-alive正好可以帮助我们解决这个问题。
keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用法如下：

1. 需要在router中设置router的元信息meta

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

2. 使用$route.meta的keepAlive属性进行判断

<el-col :span="24" class="content-wrapper">
  <transition name="fade" mode="out-in">
    //这里需要缓存，使用keep-alive标签包裹
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    //这里不需要缓存
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </transition>
</el-col>

最终实现效果如图所示：

1. 首先进入系统，注意此时路由
   
2. 然后点击新增添加一条数据，此时还停留在当前路由
   
3. 切换路由
   
4. 返回之前路由，发现之前添加的数据还在
   
   这样，不仅达到了我们的期望，而且会大大的节省性能。这就是我在vue项目中对keep-alive的使用，希望对大家有所帮助！