keep-alive是Vue提供给我们一个内置组件,
用来在路由切换的时候保存我们的组件状态
当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置,然后又去购物车页面,再回到首页的时候能够保存住我刚才滑动的位置
作用:保存我们路由切换时组件的状态 , 比如列表页面进入详情,我们想保存列表滚动的位置,我们就可以 使用keep-alive保存列表页面的滚动位置。
组件使用keep-alive以后会新增两个生命周期 actived() deactived(),
有两个参数 include 包裹的组件名会被缓存
exclude 包裹的组件名都不会被缓存
1.在app.vue 中缓存所有页面
<template>
<div id="app">
<keep-alive>
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
2.在app.vue中根据条件缓存
<template>
<div id="app">
// 1. 将缓存 name 为 test 的组件
<keep-alive include='test'>
<router-view/>
</keep-alive>
// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
<keep-alive include='a,b'>
<router-view/>
</keep-alive>
// 3. 使用正则表达式,需使用 v-bind
<keep-alive :include='/a|b/'>
<router-view/>
</keep-alive>
<keep-alive :include='includedComponents'>// 5.动态判断
<router-view/>
</keep-alive>
<keep-alive exclude='test'>// 5. 将不缓存 name 为 test 的组件
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
3.在router.js中缓存部分页面
import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Index = resolve => require(['@/components/home/index'], resolve)
const Cart = resolve => require(['@/components/home/cart'], resolve)
const List = resolve => require(['@/components/home/list'], resolve)
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home,
redirect: 'index',
children: [
{
path: 'index',
name: 'index',
component: Index,
meta: {
keepAlive: false // 不需要缓存
}
},
{
path: 'cart',
name: 'cart',
component: Cart,
meta: {
keepAlive: true // 需要缓存
}
},
{
path: 'list',
name: 'list',
component: List,
meta: {
keepAlive: true // 需要缓存
}
}
]
}
]
})