vue项目中如何使用keep-alive缓存组件

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

• 一、开启keep-alive

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

这里路由设置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}
    }
})

另 vue2.1.0 新增
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。
使用exclude属性可实现不缓存模板组件

//不缓存detail组件