使用场景
一个列表页中存在条件筛选，查询到相关数据后跳转到第二页， 选择一条数据进入详情页，后需要在详情页返回列表页时，列表页不刷新即进入详情页前（第二页，筛选条件依旧存在）的状态，就需要缓存页面。
下来就来讲讲使用keep-alive缓存页面。
keep-alive是什么
- keep-alive是Vue提供的一个内置组件，被keep-alive组件包裹的内部组件，其状态将被缓存
作用
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
生命周期
keep-alive包裹的组件，会自动新增两个生命周期函数
activated（组件激活时执行）
deactivated（组件失活时执行）
初次进入时：beforeRouteEnter>created > mounted > activated；退出后触发 deactivated
再次进入：beforeRouteEnter> activated,事件挂载的方法等；退出后触发 deactivated(只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中)
keep-alive包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行 ，不使用 keep-alive 时 每次切换组件 会重复销毁组件---创建组件 重复发起请求调取数据
keep-alive实现路由缓存主要有三种方式：
缓存所有
<keep-alive>
<router-view></router-view>
</keep-alive>
使用include或者exclude
include和exclude 可以使用逗号分隔的字符串、正则、数组；并且匹配的都是组件的name属性
数组内的name对应的是component中export出去的name，而不是router的name
缺点：这样缓存页面，虽然可以实现部分组件的缓存，但是会出现生命周期只执行一次，第二次不管从什么地方进入，都不能重新加载页面
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
根据v-if控制显示的router-view（条件缓存）\
针对该文章的使用场景，推荐使用该方法
- 1.待缓存的页面 meta的keepAlive设置为true，其他设置为false或不设置（该例订单管理列表页）
// 首页
{
path: '/homePage',
name: 'HomePage',
component: () => import('@/views/homePage/index'),
meta: { title: '首页' }
},
// 订单管理
{
path: '/waybill',
name: 'WaybillManage',
component: RouteView,
redirect: '/waybill/list',
meta: { title: '订单管理' },
children: [
{
path: '/waybill/list',
name: 'WaybillManage',
component: () => import('@/views/waybillManage/index'),
meta: { title: '订单管理', keepAlive: true }
},
{
path: '/waybill/list/:id',
name: 'addOrCheck',
component: () => import('@/views/waybillManage/components/addOrCheck'),
hidden: true,
meta: { title: '订单详情' }
}
]
},
- 2.根据v-if设置keep-alive
<!-- 需要缓存的视图组件 -->
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-else></router-view>
3.待缓存页面（该例订单管理列表页）index.vue设置keep-alive
离开该页面时，若下一个页面是详情页则缓存，否则不缓存
beforeRouteLeave (to, from, next) {
if (to.name === 'addOrCheck') {
// 进入详情，需要缓存的路由name
from.meta.keepAlive = true
next()
} else {
from.meta.keepAlive = false
next()
}
},
