vue keep-alive缓存数据方法+tips

主要针对页面点击返回时不重新加载页面，直接获取缓存。

APP.vue 页面

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件！ -->
    </router>
</keep-alive>
<router-view v-if="$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件！ -->
</router>

当路由的meta属性的keepAlive属性值为true时页面的状态保存，其他情况下不保存状态。

router index.js (路由页面)

{ 
  name: 'index', 
  path: '/index', 
  title: '主页', 
  meta: { 
    pageTitle: '主页', 
    keepAlive: true  // 需要被缓存的页面
    } 
  }

从某页返回需要缓存页面时，keepAlive值设置为true，不需要则为false。

beforeRouteLeave(to, from, next) {
   from.meta.keepAlive = true; // or false
   next()
 }

tips：
当在子路由上时，<keep-alive>写在APP.vue上不生效，需写在对应的父级页面上。