Keep-alive组件缓存
vue内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。提高性能。
1,语法:
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
2,属性
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max
- 数字。最多可以缓存多少组件实例
3,生命周期
activated:进入页面
deactivated:离开页面
顺序:created----mounted----activated
4,使用方法
首先在定义路由的时候配置 meta 字段,自定义一个KeepAlive字段作为该页面是否缓存的标记:
router.js
const router= new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/',
name: 'home',
component: Home,
meta:{
keepAlive: true // 是否缓存组件
},
redirect: {
name: 'Login'
}
},
{
path: '/HomePage', // 首页面
name: 'HomePage',
component: () => import('./views/HomePage.vue'),
meta: {
keepAlive: true
},
{
path: 'onlineQuery',
name: 'onlineDatails',
component: () => import('./views/Datails/onlineDatails.vue'),
meta: {
keepAlive: true
}
}
,{
path: '/Login', // 登录
name: 'Login',
component: () => import('./views/Login.vue'),
meta: {
keepAlive: false
}
},
{
path: '*', // 未匹配到路由时重定向
redirect: '/',
meta: {
// requiresAuth: true,
// keepAlive: true
}
}
]
})
1)页面使用
App.vue:
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
如果你的页面显示都在子路由显示,则只需要在这里定义就好了,那么你的app.vue页面就不需要定义了:
2)使用属性方法:
使用<keep-alive>提供的 exclude 或者 include 选项,此处我们使用 exclude ,在App.vue中:
<div id="app">
<keep-alive exclude="detail">
<router-view />
</keep-alive>
</div>
需要注意的是,一定要给页面组件加上相应的name,例如在detail.vue中:
<script>
export default {
name: 'detail', // 这个name要和keep-alive中的exclude选项值一致
...
}
</script>
这么写就代表了在项目中除了name为detail的页面组件外,其余页面都将进行缓存。
include 选项则相反。