vue缓存组件的正确写法及基本介绍

vue如何利用缓存组件keep-alive实现功能？下面编程教程网小编给大家介绍一下关于keep-alive的正确写法及基本语法介绍！

keep-alive缓存组件的正确用法：

//在app.vue中根据meta元信息来决定是否缓存组件
<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

路由写法：

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

基本语法介绍：