vue 页面缓存和不缓存方法之 keep-alive

概念： keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染

• 利用 <keep-alive></keep-alive> 组件包裹<router-view></router-view> （动态路由组件）实现页面缓存

  <keep-alive>
     <router-view></router-view>
  </keep-alive>
  

• 实现步骤一： 在 router.js 中来控制某个组件是否需要缓存,设置缓存之后不会触发组件销毁周期

    {
      path: '/',
      component: () => import('@/views/Index'),
      children: [
        {
          path: 'home',
          name: 'home',
          meta:{keepAlive: true},// 这个子组件需要缓存 true
          component: () => import('@/views/Home')
        },
        {
          path: 'wode',
          name: 'wode',
          meta:{keepAlive: false},// 这个子组件不需要缓存 
          component: () => import('@/views/Wode')
        },
        {
          path: 'qanda',
          name: 'qanda',
          component: () => import('@/views/QA')
        },
        {
          path: 'video',
          name: 'video',
          component: () => import('@/views/Video')
        }
      ]
  },
  

• 实现步骤二： 通过 进行路由切换时通过 $route.meta.keepAlive 来判断是否进行路由路由缓存

  <keep-alive>
  	/* 需要进行路由的缓存会执行 */
  	<router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  

  使用 keep-alive 的注意点

  1.当项目中使用了keep-alive之后，mounted，destroyed函数将不会被调用，反之会调用activated和deactivated函数。
  2.keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

  一个比较使用的业务案例

思路：通过beforeRouterLeave这个钩子来对路由里面的keepAlive进行赋值。从而动态的确定A页面是否需要被缓存

注意点：在设置路由的meta中判断下一个路由的path防止当前路由跳转到任何其它路由设置meta的keepalive

export default {
  data() {
    return {};
  },
  beforeRouteLeave(to, from, next) {
  	// 进行判断
    if (to.path === "/home") to.meta.keepAlive = true;
    next();
  }
};

本文来源参考