为了让组件数据缓存,避免每次资源重复加载(例如每次切换导航时数据会重新加载一次,体验真的差),因此使用了keep-alive,解决了以上产生的问题。 |
---|
- 一、开启keep-alive
在这里keep-alive配合了router-view使用,keep-alive本身是vue2.0的功能,并不是vue-router的,所以在vue1.0版本是不支持的。
<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>
这里路由设置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组件
<keep-alive exclude="detail">
<router-view></router-view>
</keep-alive>