Vue<keep-alive实现页面缓存>

在Vue当中，正常流程就是在切换路由时进行页面加载，每次的切换都要重新调用后端接口，但有时候在数据分页的情况下，你是不希望有这种现象出现的（在第3页打开的数据，切下路由回来就没了，还要我重新加载，坑~~）

这时候就可以用到keep-alive实现页面的缓存，避免路由切换造成不必要的麻烦。

keep-alive
优点：可以实现页面的缓存，不会重复进行接口调用，提高用户体验。
缺点：在不做任何处理的情况下，页面不会进行实时更新，及页面在第一次加载完（调用接口）后，后来的几次路由切换就不会再次调用接口

如何使用keep-alive：

在App.vue:

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

在路由(router/index.js):

给需要缓存的页面加上 keepAlive:true

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let newRouter = new Router({
routes: [
    {
      name: "HelloWorld",
      path: '/HelloWorld',
      component: resolve => require(['../components/HelloWorld'], resolve),
      meta: { title: 'HelloWorld' }
    },
   {
      name: "property",
      path: '/Property',
      component: resolve => require(['../components/page/index/Property'], resolve),
      meta: { title: '金融资产',keepAlive:true }
    },
]
});
export default newRouter

在被缓存的页面：

在页面处于 keep-alive 的前提下：
执行顺序（created > mounted > activated > deactivated）
created，mounted里面的方法只会在页面首次进入时执行，之后就不会执行；
activated，deactivated 里面的方法每次进入时都会被执行；
(这边添加了一个滚轮监听的方法，实现滚轮位置的缓存，避免页面跳转回来时一直显示在最顶部位置)

data() {
    return {
        scrollTop :0
       }
},
 created() {
   
  },
 mounted() {
 
  },
 activated() {
   window.scrollTo(0, this.scrollTop); //每次进入页面时滚轮位置在上次的位置
   //this.scrollTop = 0;
   window.addEventListener("scroll", this.handleScroll); //每次进入开启滚轮监听
 },
 deactivated(){ //离开该页面时调用的方法
  window.removeEventListener("scroll", this.handleScroll); //每次离开页面时去除这个监听
 },
methods:{
  //滚轮监听的方法
  handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        this.scrollTop = scrollTop;
    },
}

实现效果图：

keepAlive.gif

这样就可以实现每次进入该页面时页面内容被缓存，而且滚轮位置还是在上次的位置

如果想从不同的路由跳转过来，是否实现缓存，那就可以同过监听$route定义不同的状态实现对activated里面方法不同的调用

watch:{
   $route(to,from){
      //如果路由是从A过来的，那么定义一个变量为true,则在这个状态下activated里面的方法进行调用或更新数据
      //如果路由是从B过来的，那么定义一个变量为false,则在这个状态下activated里面的方法不会进行调用或更新数据
   }
}