vue缓存本地数据keep-alive

1.缓存到本地数据

    beforeRouteEnter (to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建,不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
      next(vm => {
      		// 这里执行路由进入的事件
        });
      });
    },

    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      next(vm =>{
      		// 这里执行路由退出的事件
		});
    },

2.在App.vue中设置 keep-alive

    <keep-alive>     <!--使用keep-alive会将页面缓存-->
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

3.在路由中设置开启keep-alive

   meta:{keepAlive:true}