为了让组件数据缓存,避免每次资源重复加载(例如每次切换导航时数据会重新加载一次,体验真的差),因此使用了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>