vue使用keep-alive缓存组件

为了让组件数据缓存，避免每次资源重复加载（例如每次切换导航时数据会重新加载一次，体验真的差），因此使用了keep-alive，解决了以上产生的问题。

• 开启keep-alive

在这里keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，所以在vue1.0版本是不支持的。

<template>
  <div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    <!--这里是其他的代码-->
  </div>
</template>

在vue路由中使用meta配合实现效果

//在router文件加上meta判断
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
    {//home会被缓存
        path:"/home",
        component:home,
        meta:{keepAlive: true}
    }
    {//hello不会被缓存
        path:"/hello",
        component:hello,
        meta:{keepAlive: false}
    }
})

如果我们的页面是通过某个参数来加载内容的，当参数改变时，keep-alive包裹的组件请求获取的数据不会再重新渲染页面

当我们使用keep-alive时，我们的生命周期函数中将多出一个activated的生命周期函数，当页面参数修改，第二次加载时mounted不会执行，而activated依然能触发
（这里city就是参数）

mounted () {
    this.lastCity = this.city
    //this.getHomeInfo()
  },
  //使用keepalive时组件会多一个生命周期函数activated，当页面第二次加载时mounted不会执行，而activated依然能触发
  activated () {
    if (this.lastCity !== this.city) {
    this.lastCity = this.city
    this.getHomeInfo()//请求数据的方法
    }  
  }

另 vue 2.1.0 新增
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

//不缓存detail组件
<keep-alive exclude="detail">
      <router-view ></router-view>
</keep-alive>